我正在尝试创建一个带有"标题"区域的布局,其中包含徽标和一些链接,然后是一个需要扩展到页面底部的内容区域.这是我陷入困境的地方.
我用一个高度为100%的容器div包围了标题和内容,这很好用.但我不能让内容div延伸到容器div的底部,因为给它一个100%的最小高度似乎从页面主体获取高度,所以我最终得到一个滚动条由于空间由标题占据页面顶部.
这是一个线框,希望能让我想要的更清晰......
这是一个快速的CSS示例,这是有效的,除了总是有一个滚动条,其中看起来是标题区域的高度...
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #fff;
}
body {
background-color: #000;
}
#container {
position: relative;
margin: 0 auto;
width: 1000px;
min-height: 100%;
}
#header {
padding-top: 26px;
}
#logo {
width: 194px;
height: 55px;
margin: 0 auto;
background-color: #fff;
}
#content {
margin-top: 10px;
position: absolute;
width: 1000px;
min-height: 100%;
background-color: #fff;
}
Run Code Online (Sandbox Code Playgroud)