我有这样的事情：
+-------------------------------------------+
| -- navigation -- |
+------+------------------------------------+
| | |
| left | |
| side | |
| with | |
| affix| -- content (white) -- |
| menu | |
|-black| |
| | |
| | |
| +------------------------------------+
| | -- footer (white) -- |
+------+------------------------------------+
作为我在TB 3.0中的布局,以及一些代码：
我想让我的左侧(黑色背景)和内容(白色背景)高度=我的浏览器窗口和页脚(白色背景)100％在我的内容下方可见(也在滚动上).
现在,我得到了最后一个元素的高度.如果我的内容很短,则会在浏览器的垂直中心结束.
最佳答案
纯CSS解决方案(使用calc)
原文链接：https://www.f2er.com/css/427475.html如果你可以使用CSS3,并且这个50px高度是静态的,你可以使用calc来实现你的布局.
这是一个DEMO
HTML
CSS
*
{
padding: 0;
margin: 0;
}
html,body
{
height: 100%;
}
header,footer
{
height: 50px;
background-color: yellow;
text-align: center;
}
#Container,#Content
{
height: calc(100% - 50px);
overflow: auto;
}
#Left,#Right
{
height: 100%;
}
#Left
{
float: left;
background-color: black;
color: white;
}
#Right
{
overflow: auto;
}
