HTML5 / CSS全高布局
Tom*_*zzo 1 html css layout html5 alignment
好的，这是我的基本网站结构：
<body>
<div id="wrapper">
<header><a href="/"> </a></header>
<nav>
<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>
</nav>
<div id="content"></div>
<footer><a href="/"> </a></footer>
</div>
</body>
这是我的CSS基础知识：
html
{
font-size: 100%;
height: 100%;
line-height: 1.4;
overflow-y: scroll;
}
body
{
background: #EEE url("../images/background.png") repeat-y center center fixed;
color: #333;
height: 100%;
font: 1em 'Lato-Regular';
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
margin: 0 auto;
width: 960px;
}
#content
{
min-height: 460px;
height: auto !important;
height: 460px;
margin: 20px 0;
}
这是我想要实现的（最好不使用javascript hack）：
- 页眉和页脚的高度取决于它们的内容大小。
div#content应该具有X像素的最小高度，但否则要扩展到想要包含页面内容的程度。div#wrapper应该拉伸以填充整个视口高度，并且div#content是拉伸填充的柔性部分。- 我正在尝试以尽可能多的浏览器为目标，但我并不是真正的跨浏览器完全兼容。让旧的浏览器消亡。
我得到一个奇怪的结果：
如您所见，包装程序未拉伸以填充浏览器视口，结果，页脚（底部的黑条）浮在页面中间。你能帮我吗？
display:flex;如今很容易（除了看起来很像这个问题，使用display：flex使用CSS填充剩余的垂直空间）
html
{
font-size: 100%;
height: 100%;
line-height: 1.4;
overflow-y: scroll;
}
body
{
background: #EEE url("../images/background.png") repeat-y center center fixed;
color: #333;
height: 100%;
font: 1em 'Lato-Regular';
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
margin: 0 auto;
width: 960px;
display:flex;
flex-direction:column
}
#content
{
flex:1;
margin: 20px 0;
/* overflow:auto; add this and it will show a scrollbar when needed and won't push footer down */
}
footer,header {
background:lightgray;
/* no need to set any height, a min-height eventually */ <div id="wrapper">
<header><a href="/">header</a></header>
<nav>
<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>
</nav>
<div id="content"></div>
<footer><a href="/">footer</a></footer>
</div>| 归档时间： |
|
| 查看次数： |
3094 次 |
| 最近记录： |