HTML5/CSS 全高布局

Question

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

<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 技巧）：

页眉和页脚高度由其内容大小决定。
div#content 的最小高度应为 X 像素，否则可根据需要扩展到包含页面内容的程度。
div#wrapper 应该拉伸以填充整个视口高度，div#content 是拉伸填充的灵活部分。
我正在尝试针对尽可能多的浏览器，但我并没有真正实现完全的跨浏览器兼容性。让旧浏览器死吧。

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

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

Answer 1

css3 有一个高度和宽度的单位，很多人并不真正使用或不知道。 vw和vh，分别代表viewport width和viewport height。你应该使用它们。如果你想让你们中的一个 div 占据全高，那么设置 height: 100vh 如果它是一个图像并且你不希望它被垂直挤压放置 width: auto。我经常使用 vw 和 vh。 vw 最多，甚至字体大小我将使用 font-size：2vw 或类似的东西，1.6 或另一个小数，这样无论设备达到什么宽度，它始终是 2 个视口宽度 (2vw)。尝试一下，您会找到合适的尺寸。将页脚和导航设置为设置的 vh 或 vw，它们将与您使用的任何设备保持比例。

Answer 2

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>

HTML5/CSS 全高布局

HTML5/CSS Full Height Layout

html

css

layout

alignment