这是另一个纯 CSS 解决方案,无需指定任何高度即可工作。[这个解决方案值得自己回答]
这是一个工作小提琴
为什么好?
因为也许有一天你的页眉会改变,影响他的身高,或者你的菜单会增长,或者你的页脚需要额外的一行导致他的身高增长..
所有这些更改将导致您为更改的元素重新修复另一个高度,并重新计算内容的正确高度。
我的解决方案使它更容易,因为所有部件都是流动的。让他们在页面中占据他们需要的空间,内容总是会占据剩余的高度。
浏览器支持:
测试平台: IE10、Firefox、Chrome、Safari、Opera。(不适用于旧版 IE,未在其他浏览器上测试)
有什么缺点吗?
是的。不幸的是,由于这个技巧的工作方式,您将需要更改 HTML 的排列。
我找到了一种纯 CSS 方法来创建一个div
带有两个 child 的容器div
。第一个将采用他需要的确切高度,第二个将采用剩余的容器高度。
但是如果我想要相反的情况怎么办,如果我想第二个div
占据他的确切空间,第一个div
占据容器的剩余高度怎么办?
我没有找到使用纯 CSS 的简单方法。这就是为什么,我实际上颠倒了div
s 的顺序,第一个保存第二个数据,第二个保存第一个数据,现在我们让第一个 div 取他的确切高度,第二个拉伸到容器的末尾为我们想要,然后我通过 CSS 旋转它们的视图以使它们按顺序显示。
对于您的情况,这意味着您必须按该顺序创建 HTML。
- 标题
- 菜单
- 页脚
- 内容
解决方案:
HTML:
<div class="Container">
<div class="Header">I'm in the header</div>
<div class="Menu">I'm in the menu</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">I'm in the footer</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="Content">
I'm in the content
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Menu
{
/*for demonstration only*/
background-color: #6ea364;
}
.Content
{
height: 100%;
overflow: auto;
/*for demonstration only*/
background-color: #90adc1;
}
.Footer
{
/*for demonstration only*/
background-color: #b5a8b7;
}