Css 流体垂直布局_Css - Fatal编程技术网

Css 流体垂直布局

css

Css 流体垂直布局,css,Css,我搜索了很多论坛和问题，但是找不到任何关于流体垂直（而不是水平布局）的内容我的意见如下： <div class="wrapper"> <div class="header"></div> <div id="content"></div> <div class="footer"></div> </div> 在这种情况下，我有固定高度的标题和内容布局。页脚粘在底部这一切都很好

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

我的意见如下：

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

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

这一切都很好，但我想使流体垂直布局，使页脚始终坚持底部（就像现在一样），但页眉和内容有流体的高度：30%和70%相应

我怎样才能做到这一点呢？

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

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

布局：

<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

编辑

抱歉，首先我为标题添加了fix size，我对其进行了更正，尽管这样看起来有点问题。我仍然在寻找最好的方法。

在这种情况下，我通常会说——让CSS头疼的问题见鬼去吧，让我们来取而代之吧

HTML:

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

由于我有同样的问题，您可能需要一个所谓的“粘性页脚”

例如，它可以跨所有浏览器运行。这里还有一篇很好的文章介绍了如何实现它：

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

HTML

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

我不太确定您想要实现什么。页脚有固定的高度，页眉/内容都应该拉伸以填充其余部分？（保持30:70的比例）？是的，我想完全实现你写的！当内容扩展太多时，它会变得棘手。例如，假设视口的高度为1045px。页脚占45像素，页眉占300像素，内容占700像素。但是现在假设头部包含一个600px高的图片，而内容是200px高的图片？那么尺寸应该是多少呢？您是放弃30:70的比例来保持屏幕上的所有内容，还是将标题扩展到600px，内容扩展到1400px？或者您可以将它们保持在300px/700px，并在标题中添加一个滚动条？或者只是剪辑标题图片？这不是给标题一个固定的大小吗？作者希望它能延伸到页面减去页脚的30%。是的，我注意到了，我正在更改它，对不起。星期一。谢谢你的回复！然而，我根据您的表格原则使用了CSS：我使用了

display:table

和

display:table cell

。这就成功了，所以谢谢你的提示。没问题，尽管这种方法在旧浏览器（比如IE6）上可能会失败。所以在那里要小心。（另外，我不认为在其他标记名下伪装一个表有什么意义，但这是你的选择）@Vilx-“我不认为在其他标记名下伪装一个表有什么意义”，因为你的标记使用不正确？因为内容结构不应该使用表。您的答案是“黑客”，而不是正确的语义解决方案。@Axel-在这种情况下，没有“正确的语义解决方案”。（好的，也许在最新的浏览器中，不需要表格就可以完成，我不知道，现在也没有时间检查）。是的，有。相反，你提供了一个2分钟的快速解决方案，向提出问题的人传达，抄近路是可以的。他所要求的是完全可能的，没有使用表格标记作为布局结构。这只是一种错觉，如果你真的想要固定的流体固定布局，这是行不通的。这是一个简单的解决办法，可能有更好的解决办法，但真正的问题是缺乏对现代布局的HTML/CSS支持（例如，流体尺寸元件的绝对定心也需要一些JS技巧）

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

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

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

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

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

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

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

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

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