流体垂直布局答案

【问题标题】：Fluid Vertical Layout流体垂直布局
【发布时间】：2013-05-09 02:56:45
【问题描述】：

我搜索了许多论坛和问题，但找不到任何有关流体垂直（不是水平布局）的信息。

我的标记如下：

<div class="wrapper">
    <div class="header"></div>
    <div id="content"></div>
    <div class="footer"></div>
</div>

我的 CSS：

html,body {margin: 0; padding: 0; height: 100%;}
.wrapper {width: 900px; margin: 0 auto; height:auto !important; height:100%; min-height:100%; position: relative;}
#content {padding-bottom: 60px; /* For the footer padding */ }
.footer { position: absolute; bottom: 15px; height: 45px;}

在这种情况下，我的布局具有标题和内容的固定高度。页脚粘在底部。

这一切都很好，但我想制作流畅的垂直布局，以便页脚始终粘在底部（就像现在一样），但页眉和内容具有流畅的高度：相应地为 30% 和 70%。

我怎样才能做到这一点？

【问题讨论】：

我不太确定您想要实现什么。页脚具有固定高度，并且页眉/内容都应该拉伸以填充其余部分？（保持 30:70 的比例）？
是的，我想完全实现你写的！
内容扩展过多时会变得很棘手。例如，假设视口的高度是 1045px。然后页脚占用 45 像素，页眉 300 像素和内容 700 像素。但是假设现在标题包含一个 600px 高的图片，而内容 - 200px 高的图片？那么尺寸应该如何呢？您是放弃 30:70 的比例以将所有内容都保留在屏幕上，还是将标题拉伸到 600 像素，将内容拉伸到 1400 像素？或者也许您将它们保持在 300px/700px 并在标题中添加滚动条？或者只是剪掉标题图片？

标签： css

【解决方案1】：

布局：

<body>
<div id="container">
    <div id="header">
    </div>

    <div id="content">
        <div id="content-text">
        </div>
    </div>

    <div id="footer">
    </div>

</div>
</body>
</html>

CSS：

html {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
}

#container {
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    margin-left: auto;
    margin-right:auto;
    overflow:hidden;
}

#header,
#footer {
    position:absolute;
    left:0;
    z-index:2;
    width:100%;
    overflow:hidden;
}

#header {
    top:0;
    height:30%;
}

#footer {
    bottom:0;
    height:1.6em;
}

#content {
    position:absolute;
    bottom:0;
    top:0;
    right:0;
    left:0;
    z-index:10;
    width: 100%;
    height:auto;
    margin-top:30%;
    margin-bottom:1.6em;
    overflow:hidden;
}

#content-text {
    position:relative;
    width:100%;
    height:100%;
    margin-left: auto;
    margin-right:auto;
    overflow:auto;
}

我还建议在此之前重置 CSS。

编辑抱歉，首先我为标题添加了修复大小，我更正了它，尽管这样似乎有点错误。我仍在寻找最好的方法。

【讨论】：

这不是给标题一个固定的大小吗？作者希望它拉伸到页面的 30%（减去页脚）。
是的，我注意到了，我正在更改它，抱歉。星期一。

【解决方案2】：

在这种情况下，我通常会说 - 让 CSS 头疼得见鬼去吧，让我们改用 use a good old fashion table！

HTML：

<table style="height: 100%">
    <tr>
        <td id="header"></td>
    </tr>
    <tr>
        <td id="contents"></td>
    </tr>
    <tr>
        <td id="footer"></td>
    </tr>
</table>

CSS：

body, html
{
    height: 100%;
}
#header
{
    background-color: red;
    height: 30% 
}
#contents
{
    background-color: lime;
    height: 70% 
}
#footer
{
    background-color: blue;
    height: 45px;
}

它可能不“时尚”，但它可以完成工作，并且比必要的 CSS 蜘蛛网简单一个数量级。此外，如果某些内容变得太大，它会（以某种特定于浏览器的方式）调整大小以保持所有内容可见，并在必要时在正文中添加滚动条。

【讨论】：

感谢您的回复！但是我根据您的表格原则使用了 CSS：我使用了 display:table 和 display:table-cell。成功了，感谢您的提示。
没问题，尽管这种方法在旧版浏览器（比如 IE6）上可能会失败。所以在那儿要小心。（另外，我看不出将表格伪装成其他标签名称的意义，但这是您的选择）
@Vilx - “我没有看到将表格伪装成其他标签名称的意义”，因为您的标记使用不正确？因为您不应该将表格用于内容结构。您的答案是“hack”，而不是适当的语义解决方案。
@Axel - 在这种情况下，没有“适当的语义解决方案”。（好吧，也许在最新的浏览器中，它可以在没有表格的情况下完成，我不知道，我现在没有时间检查）。
是的，有。相反，您提供了一个 2 分钟的快速解决方案，向提出问题的人传达，走捷径是可以的。他所要求的完全有可能不使用表格标记进行布局结构..

【解决方案3】：

对于页脚，你可以试试这个

.footer { 
position: fixed; 
bottom: 0; 
height: 45px;
}

【讨论】：

【解决方案4】：

因为我有同样的问题，你可能需要一个所谓的“粘性页脚”。

例如http://ryanfait.com/sticky-footer/，它适用于所有浏览器。这里还有一篇很好的文章描述了如何实现它：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

【讨论】：

这只是一种错觉，如果你真的想要固定-流体-固定布局，这是行不通的
这是一个简单的解决方法，可能有更好的解决方案，但真正的问题是 HTML/CSS 缺乏对现代布局的支持（例如，流体大小元素的绝对居中也需要一些JS技巧）

【解决方案5】：

Demo Page - fixed fluid fixed

我做了一个非常常见的布局的快速演示：

HTML

<body>
    <header>Header</header>
    <section>Content</section>
    <footer>Footer</footer>
</body>

CSS

html, body{ height:100%; }
/* you can use "border-spacing" on the body as well */
body{ display:table; width:100%; padding:0; margin:0; }
body > *{ display:table-row; }

header{ height:100px; }
section{ height:100%; }
footer{ height:50px; }

请注意，这仅适用于现代浏览器

【讨论】：