我正在寻找一种方法来使包含我的主页内容的div扩展到适合添加页眉和页脚后留下的空间.HTML的布局如下:
<div id="wrapper">
<div id="header-wrapper">
<header>
<div id="logo-bar"></div>
</header>
<nav></nav>
</div>
<div id="content"></div>
</div>
<div id="footer-wrapper">
<footer></footer>
</div>
它的设计是通过将#wrapper的最小高度设置为100%来使页脚始终超过页面底部.问题是#content不会扩展以填充#wrapper中的空白区域,因此很难获得我想要的外观.我该怎么做呢？
编辑:
为什么不使用顶部和底部.这是一个完整的例子.
您可以调整顶部和底部值,以优化页眉/页脚位置.
<html>
<head>
<style type="text/css">
BODY {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
height: 100%;
width: 100%;
}
#header-wrapper {
position: absolute;
background-color: #787878;
height: 80px;
width: 100%;
}
#content {
position: absolute;
background-color: #ababab;
width: 100%;
top: 80px;
bottom: 50px;
}
#footer-wrapper {
position: absolute;
background-color: #dedede;
height: 50px;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo-bar">Logo</div>
</div>
<div id="nav"></div>
</div>
<div id="content">Content</div>
<div id="footer-wrapper">
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>