CSS Layout Help - 将div拉伸到页面底部

Acc*_*ate 16 html css

我正在尝试创建一个带有"标题"区域的布局,其中包含徽标和一些链接,然后是一个需要扩展到页面底部的内容区域.这是我陷入困境的地方.

我用一个高度为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)

Ste*_*ler 2

使容器 div 位置:相对,内容 div 位置:绝对。然后给内容div top:<标题高度>和bottom:0

现在无法测试这个,但我认为这样的东西应该有效。