网站应始终填满整个屏幕答案

【问题标题】：Website should always fills the entire screen网站应始终填满整个屏幕
【发布时间】：2014-01-07 00:01:34
【问题描述】：

假设我在网站上有三个框（div）（见下图）：

带有徽标的标题
包含一些文字的内容
带有联系信息的页脚

每个盒子都有独特的颜色（依次为：黄色、橙色和蓝色）和黑色边框。我想网站总是填满整个屏幕，标志在顶部，页脚在底部。所以如果内容中没有足够的文字，应该扩展内容，使页脚在底部。如果内容中有很多文字，滑块应该出现在右侧。

如何在 CSS 中做到这一点？重要的是盒子有背景。我找到了很多解决方案，但没有一个不能与背景一起正常工作。

【问题讨论】：

stackoverflow.com/questions/5189238/…
我相信您要求的是“固定页眉和页脚”？
我更新示例图像。这应该可以解释一切。
你真的应该看看对我之前链接的问题的最高评价。 AFAIK 它正好回答了这个问题。
克里斯，它没有回答 OP。 1）根据OP问题中非常清晰的图表，它不提供标题或标题偏移量。 2) 它不包括实际上相应扩展的中心区域，因为它始终在页脚下方。它也不容易适应这样做。如果您实际上没有按照 OP 中底图显示，这很好，中间有填充或内容区域大小的对象。 3）它实际上根本不起作用，因为很可能是一个错字。在这里查看我将（更正的）代码粘贴到 jsfiddle 中：jsfiddle.net/syndicatedshannon/mRbQd

标签： html css footer

【解决方案1】：

解决方案说明

图表中的黑框的最小高度为 100%，是滚动容器，并且是相对位置的，以允许子位置与其相对应。
图表中的红色框实际上由 2 个框组成：
- 一个用于动态大小的内容；这有足够的顶部和底部填充来为您的页眉和页脚腾出空间，并强制滚动容器展开
- 一个用于背景；这是绝对位置，指定了相对于其父黑盒的顶部和底部位置。
图表中的黄色和蓝色框可以分别是position: absolute、top: 0 和bottom: 0...或者您可以选择放置它们的位置。

这里是它的一个小提琴：http://jsfiddle.net/syndicatedshannon/F5c6T/

here 是另一个版本，它具有显式视口元素，只是为了澄清、匹配颜色和添加边框以复制 OP 图形（尽管根据 OP，黑色边框实际上是窗口）。

示例 HTML

<html>
    <body>
        <div class="background"></div>
        <div class="content"></div>
        <div class="header"></div>
        <div class="footer"></div>
    </body>
</html>

示例 CSS

html { position: absolute; height: 100%; left: 10px; right: 10px; overflow: auto; margin: 0; padding: 0; }
body { position: relative; width: 100%; min-height: 100%; margin: 0; padding: 0; }
.background { position: absolute; top: 120px; bottom: 120px; background-color: red; width: 100%; }
.content { position: relative; padding: 120px 0; }
.header { position: absolute; top: 10px; height: 100px; width: 100%; background-color: yellow; }
.footer { position: absolute; bottom: 10px; height: 100px; width: 100%; background-color: cyan; }

另请注意，这假设您还不能依赖 CSS3。

【讨论】：

响应您的“黑匣子就是屏幕”评论，然后添加一个元素。虽然 HTML 或 BODY 标签可以正常工作。
你能解释一下代码吗？假设页脚和页眉高度为 100 像素。
你的意思是这样的：html { position: relative;最小高度：100%； } div#header { 高度：100px;位置：绝对；顶部：0； } div#content { 顶部：100px;底部：100px； } div#footer { 高度：100px;位置：绝对；底部：0； }
我在上面的答案中添加了一个小提琴链接。我认为您在上面的评论中给出的示例不会起作用。这会将页眉和页脚固定在 html 高度的顶部和底部，是的，但没有什么会导致 HTML 元素需要滚动。相反，具有固定顶部和底部的 #content 子项将成为滚动区域。
如果您有任何问题，请告诉我，尽管工作中的小提琴可能已经很清楚了。

【解决方案2】：

如果您只针对现代浏览器，可以使用 calc()

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

.header {
    height: 50px;
    margin-bottom: 10px;
}

.footer {
    height: 100px;
    margin-top: 20px;
}

.content {
     min-height: calc(100% - 50px - 10px - 100px - 20px);
}

缺点是您需要知道页眉和页脚的大小，并且需要对其进行修复。如果不使用 Javascript，我不知道有什么办法。对于稍微不太现代的浏览器，您可以使用边框框来获得与上述相同的效果。

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

.header {
    height: 50px;
    margin-bottom: 10px;
    z-index: 5;
    position: relative;
}

.footer {
    height: 100px;
    margin-top: -100px;
    z-index: 5;
    position: relative;
}

.content {
    box-sizing: border-box;
    padding: 60px 0 120px 0;
    margin-top: -60px;
    min-height: 100%;
    z-index: 1;
    position: relative;
}

最后，这里是JS解决方案：

$(function(){
    $('.content').css('min-height',
            $(window).height()
            - $('.header').outerHeight()
            - $('.footer').outerHeight() - $('.content').marginTop()
            - $('.content').marginBottom());
});

编辑：我的 JS 解决方案采用边框框且没有边框。这个解决方案应该更健壮：

function setContentSize() {
    $('.content').css('min-height',
            $(window).height()
            - $('.header').outerHeight()
            - $('.footer').outerHeight()
            - ($('.content').outerHeight()
                - $('.content').innerHeight()));
}

$(setContentSize);
$(window).on('resize', setContentSize);

【讨论】：