Question

我搜索了很多论坛和问题，但找不到任何关于流体垂直（不是水平布局）的内容。

我的标记如下：

<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％。

我怎样才能做到这一点？

Answer 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。

EDIT 对不起，首先我添加了标题的修复大小，我纠正了它，虽然它似乎有点像这样的错误。我还在寻找最好的方式。

Answer 2

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

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

Answer 3

在这种情况下，我通常会说 - 对于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 spiderweb简单一个数量级。此外，如果某些内容变得太大，它将（以某种方式，以某种特定于浏览器的方式）调整大小以保持一切可见，如果需要，可以向主体添加滚动条。

Answer 4

由于我遇到同样的问题，你可能需要一个所谓的“粘性页脚”。

在http://ryanfait.com/sticky-footer/查找示例，它可以在所有浏览器中运行。还有一篇很好的文章描述了如何在这里实现它：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Answer 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; }

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

流体垂直布局

5 个答案:

Demo Page - fixed fluid fixed

HTML

CSS