我想创建一个全屏 CSS 布局。
<div id="divLeft">LEFT is ok</div>
<div id="divRight">
<div id="divTop">TOP is ok</div>
<div id="divCenter">CENTER should have liquid height</div>
<div id="divBottom">BOTTOM should be always bottom</div>
</div>
CSS
html{
height:100%
}
body{
height:100%
}
#divLeft{
float:left;
width:70px;
height:100%;
background:#6c9;
}
#divRight{
margin-left:70px;
height:100%;
background:#999;
color:#fff;
}
#divTop{
background:red;
text-align:right;
}
#divCenter{
background:blue;
text-align:center;
}
#divBottom{
background:green;
text-align:center;
}
因此,问题出在 #divCenter
(应具有液体高度)和 #divBottom
(应始终位于屏幕底部)。
最佳答案
您可以使用 calc()
轻松实现此目的功能,虽然它不是supported below IE 9和移动支持是相当糟糕的。您需要做的就是给 #divCenter
一个 100% 的高度减去其 sibling 的 20px + 20px 高度。要让页脚出现在底部,您需要相对定位其包含 block ,然后绝对定位页脚并将其放在底部(bottom: 0;
)。
关于css - 全屏CSS布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16890069/