我有一个页眉,内容和页脚.页眉和页脚具有固定的高度,我希望内容调整其高度,以便它在页眉和页脚之间动态匹配.我打算在我的内容中加入背景图像,因此它实际上填满了剩余的未占用垂直空间是至关重要的.
我使用Sticky Footer方法确保页脚保留在页面底部.然而,这不会使内容跨越剩余空间的整个高度.
我尝试了几个涉及我添加的解决方案,height:100%, height:auto; position:relative但它没有用.
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#wrapper #content {
background-color: pink;
width: 400px;
height: 100%;
margin: 0 0 -30px 100px;
padding: 25px 30px 25px 30px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>小智 8
关于高度的诀窍:100%是它要求所有父容器也设置其高度.这是一个html示例
<html>
<body>
<div id="container">
</div>
</body>
</html>
为了将高度设置为100%的容器div动态扩展到窗口的高度,您需要确保body和html元素的高度也设置为100%.所以...
html
{
height: 100%;
}
body
{
height: 100%;
}
#container
{
height: 100%;
}
会给你一个扩展到适合你窗户的容器.然后,如果您需要在此窗口上方浮动页脚或标题,则可以使用z索引进行此操作.这是我发现的唯一能够动态填充垂直高度的解决方案.
尝试将您的CSS更改为:
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#content {
background-color: pink;
width: 400px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 30px;
top: 150px;
margin-left: 100px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>您可能不希望设置宽度,填充,边距等.包装器.此外,通过绝对定位,您可以将内容的底部和顶部拉到您想要的位置.
我想,这就是你追求的目标.
我提供了一个稍微更通用的解决方案,因此对于阅读此答案的其他人更有用,并想知道如何将其应用到他们的网站.
假设你有三个div:
<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>
其中#header是固定的并且可能具有可变高度,#content应该消耗所有剩余的垂直空间并且#footer是固定的,并且可以具有可变高度:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#header {
flex: none;
}
#contents {
flex: 1;
height: 100%;
overflow-y: scroll;
}
#footer {
flex: none;
}
请注意,这将允许内容垂直滚动以显示其整个内容.
您可以在这里阅读有关display:flex的更多信息.
我花了几个小时试图解决这个问题,最后得到一个没有黑客攻击的强大解决方案.但是,它需要CSS3,这需要一个现代的浏览器来支持它.所以,如果这个约束适合你,那么我有一个真正有效的解决方案.
http://jsfiddle.net/u9xh4z74/ 如果需要证明,请将此代码复制到您自己的文件中,因为JSFiddle实际上不会将flexbox正确地呈现为嵌入代码.
基本上,您需要 - 将目标容器设置为100%高度,您似乎已经知道 - 您设置的父容器显示:flex和flex-direction:vertical(您将在JSFiddle中看到我还包括替代样式做同样的事情,但跨浏览器支持需要) - 你可以让页眉和页脚成为他们的自然高度,不需要在这方面指定任何东西 - 在容器中你想要填满剩余的空间,设置flex:1.你已经定了!你会发现它的工作方式完全符合你的语义.同样在JSFiddle中,我包括overflow:auto来演示如果你有更多的文本比屏幕可以处理的更多,滚动就像你想要的那样工作.
<div style="display:flex; flex-direction:vertical;">
...header(s)...
<div style="flex: 1; overflow: auto;">
As much content as you want.
</div>
...footer(s)...
</div>
作为旁注,我追求使用display:table来尝试做同样的事情.它也可以正常工作,除了溢出的内容不能像你期望的那样工作,而溢出的内容只是将容器扩展到内容的大小,我很确定这不是你想要的.请享用!