CSS 布局帮助 - 将 div 拉伸到页面底部答案

【问题标题】：CSS Layout Help - Stretch div to bottom of pageCSS 布局帮助 - 将 div 拉伸到页面底部
【发布时间】：2015-07-05 00:10:16
【问题描述】：

我正在尝试创建一个布局，其中包含一个包含徽标和一些链接的“标题”区域，然后是一个需要扩展到页面底部的内容区域。这就是我卡住的地方。

我已经用一个高度为 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;
}

【问题讨论】：

刚刚测试了我对此的回答，只要您的标题具有固定高度就可以正常工作。
感谢您的帮助。刚刚更新了我的示例，为我的标题添加了一个固定高度，并将内容的“顶部”值设置为标题和边距的高度。但是我仍然看到一个滚动条。
移除内容div的最小高度
效果很好，直到内容div的内容超过页面高度，然后div从页面底部移动。
嗯，当内容超出页面时，您希望发生什么？滚动条？如果您将 overflow:auto 设置为内容 div，它将仅在 div 上提供滚动条（而不是在整个页面上）。

标签： css html

【解决方案1】：

http://jsfiddle.net/CZayc/

这通过将页眉和正文包装在一个 div 中以将页脚向下推来工作

index.html

<div id="wrap">
    <div id="header">
        header
    </div>
    <div id="main">
        main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
    </div>
</div>
<div id="footer">
    footer
</div>

style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
#header {
    border-top:20px solid #fff;
    height: 33px;
    line-height: 33px;
    text-align: center;
    background-color: green;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
    overflow: auto;
    padding-bottom: 53px; /* must be same height as the footer */
    background-color: red;
    height: 90%
}
#footer {
    position: relative;
    margin-top: -53px; /* negative value of footer height */
    height: 33px;
    line-height: 33px;
    border-bottom:20px solid #fff;
    text-align: center;
    background-color:blue;
}

【讨论】：

这只是一个链接，不是答案。你能把链接中的一些信息带进来吗？

【解决方案2】：

使容器 div 位置：相对和内容 div 位置：绝对。然后给内容 div top:

和 bottom:0

目前无法对此进行测试，但我认为这样的事情应该可行。

【讨论】：

或者，您可以在加载后使用 javascript 来解决此问题，但这不是我的首选（尽管我不得不在我的一个网站中使用这种方法）
这应该在 IE7+ 中工作。见我的example 100% height layout。

【解决方案3】：

限制：标题高度应该是静态的，具有绝对高度。

内容高度是动态的。

CSS 代码：

* {
    padding:0;
    margin:0;
}
html, body {
    height: 100%;
    color: #fff;
}
#header {
    background: red;
    position: absolute;
    z-index:20;
    height: 7em;
    overflow:hidden;
    width:100%;
}
#content {
    background: blue;
    position: absolute;
    top: 0;
    padding-top: 7em;
    min-height: 100%;
    box-sizing: border-box;
}

内容一直延伸到底部，即使文本很短。

当内容的文本长于我们的窗口高度时 - 我们会自动滚动

示例： http://jsfiddle.net/fixit/p3B4s/3/

【讨论】：