HTML5/CSS 全高布局答案

【问题标题】：HTML5/CSS Full Height LayoutHTML5/CSS 全高布局
【发布时间】：2016-04-30 20:31:06
【问题描述】：

好的，这是我的基本网站结构：

<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 是可拉伸以填充的灵活部分。
我正在尝试针对尽可能多的浏览器，但我并没有真正实现完全的跨浏览器兼容性。让旧的浏览器死掉吧。

我得到了一个奇怪的结果：

如您所见，包装器没有拉伸以填充浏览器视口，因此页脚（底部的黑色条）浮动在页面中间。你能帮帮我吗？

【问题讨论】：

你能创建一个 jsfiddle 吗？使用您提供的代码，我无法重新创建它。
那是因为你没有任何内容...相信我，当你把它填满 300 行内容时，它会没事的。内容属性， min-height ， height 和 height 是无用的兄弟... height 默认为 auto ，因为它填充了容器的内容。
您可以将body 的背景设置为与footer 匹配，这样您就不会在页脚下看到较浅的背景。然后将较浅的背景移至您的#content。
你还没有发布页眉和页脚的css。

标签： css html layout alignment

【解决方案1】：

display:flex; 现在很容易（除了看起来很像这个问题Fill remaining vertical space with CSS using display:flex）

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>

【讨论】：

是的，但是 IE8 和 IE9 不支持 flexbox 布局模块 :(
@Nasco.Chachev 阅读了 OP 的第 4 条要求（特别是最后一句）；）
@GabyakaG.Petrioli 是的，我读过。我的观点相同，让旧浏览器死掉：D 但是，我只是说 flexbox 还没有完全支持.. 不讨厌 :)
@Nasco.Chachev 对于旧版浏览器，display:table 布局属性可以帮助您几乎同样轻松地实现这一点，但是没有选项可以让页脚冻结在底部，它将被向下推随着内容随着屏幕尺寸的增长而增长； flex 可以帮助真正轻松地管理网格布局：op 设计与 flex 搁浅codepen.io/anon/pen/gPvBze

【解决方案2】：

css3 附带了一个高度和宽度单位，很多人并不真正使用或知道。 vw 和 vh，分别代表视口宽度和视口高度。你应该使用它们。如果您希望其中一个 div 采用全高，则设置 height: 100vh 如果它是图像并且您不希望它被垂直挤压放置 width: auto。我经常使用 vw 和 vh。 vw 最多，甚至字体大小我将使用 font-size: 2vw 或类似的东西，1.6 或其他小数，这样无论设备的宽度是多少，它始终是 2 个视口宽度（2vw）。玩弄它，你会找到合适的尺寸。将页脚和导航设置为设置的 vh 或 vw，它们将与您使用的任何设备保持成比例。

【讨论】：