100% 高度内容 <div> 带有粘性页脚答案

【问题标题】：100% height content <div> with sticky footer100% 高度内容 <div> 带有粘性页脚
【发布时间】：2014-02-13 09:42:24
【问题描述】：

我需要有一个固定高度的页眉、一个固定高度的页脚和一个 100% 高度的 div 夹在它们之间（它包含一个完整的页面背景图像）。我正在使用粘性页脚，因为这是一个模板，也将用于具有可能溢出的常规内容的页面（没有背景图像）。这适用于常规页面，但在需要 100% 高度容器的页面上，它会失败。我无法将 100% 的高度 div 扩展到 100%。任何帮助将不胜感激。

这是显示我在使用 100% 高度 div 时遇到的问题的测试页面：http://www.dunnandtigheinteriors.com/new/wp-content/themes/dunntighe/testhome.html

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font-family: Georgia, Times, "Times New Roman", serif;
    background: #EFEFEF;
    font-size: 14px;
}
#wrapper {
    min-height: 100%;
/*    height: 100%;
    position: relative;  Required to absolutely position the footer 
    text-align: center;*/
}
#headerHolder {
    width: 100%;
    background: #FFFFFF;
    height: 50px;
}
#bkgHolder {
    width: 100%;
    height: calc(100% - 100px);
    background: #DEDFE1;
    padding-bottom: 25px;
    background-image: url('images/DunnTigheWhiteOverlay.png');
    background-repeat: no-repeat;
    background-position: center; 
    background-size: auto 100%;
    overflow:auto;
    padding-bottom: 25px; /* must be same height as the footer */
}
#footerHolder {
    text-align: center;
    font-size: 10px;
    height: 25px;
    color: #888888;
    background-color: #0074a2;
/*    position: absolute;*/
/*    bottom: 0;  Sit it on the bottom 
    left: 0;*/
    width: 100%; /* As wide as it's allowed */
    position: relative;
    margin-top: -25px;
    clear:both;
}
#footerHolder p {
    padding: 5px 0 0 0;
    margin: 0;
}
#pageText {
    overflow:auto;
    padding-bottom: 25px; /* must be same height as the footer */
}
.pageContent {
    text-align: left;
    width: 680px;
    margin: 0 auto;
    padding-bottom: 15px;
}

和html

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="test.css" media="screen" />
    </head>
    <body>
        <div id='wrapper'>
            <div id="headerHolder">
            </div>
            <div id="bkgHolder">
                <div id='content'>
                    some content here
                </div>
            </div>
        </div>
        <div id="footerHolder">
                <p>All Content and Images, Copyright &copy;  Dunn & Tighe Interiors</p>
            </div>
    </body> </html>

【问题讨论】：

介意我重写你的模板吗？我有一个更简单的解决方案。
如果我将 height: 100% 添加到包装器上，它会解决 100% 高度页面的问题，但随后会导致溢出的页面中断（粘性页脚不会移动到底部)。
我明白了。我正在为完整的内容和缺乏内容制作一个真正快速的模板:-)。请稍等。
抱歉，让您的 BG 图像工作了这么久。

标签： css height sticky-footer

【解决方案1】：

类似这样的作品？

http://jsfiddle.net/SinisterSystems/8aLg3/1/

HTML：

<div id="bkgHolder"></div>

<div class="wrapper">
    <div id="header">
        <h1>I'm the Sticky Header</h1>
    </div>
    <div id='content'>
        <p>Some content here</p>
    </div>
</div>

<footer class="footer">
  I'm the Sticky Footer.
</footer>

CSS：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#header {
    background:#CCC;
    height:50px;
}
#bkgHolder {
    background-image: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');
    background-repeat: no-repeat;
    background-position: center top; 
    background-size: cover;
    width:100%;
    height:100%;
    position:absolute;
    z-index:-10;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -25px; 
  position:relative;
}
.wrapper:after {
  content: "";
  display: block;
}
.footer, .wrapper:after {
  height: 25px; 
}
.footer {
  background:#6AF;
}
p {
    color:#FFF;
}

编辑：

你总是可以做这样的事情吗？

JS 小提琴：http://jsfiddle.net/SinisterSystems/8aLg3/6/

【讨论】：

非常感谢您花时间寻找解决方案，Nicholas。你不知道我有多欣赏它。它工作得很好，除了背景图像根本不能被裁剪 - 它需要 100% 的高度可见。也许通过向#bkgHolder 添加边距，我可以偏移页眉和页脚？
哦，我特意加了一个cover 让它伸展。是的，您当然可以使用 JS in 和 offset 对其进行裁剪以使其适合，但为什么不尝试您的原始代码呢？一秒钟。
Try this 我只是简单地使用了您的代码。我正在使用一个巨大的 BG 图像。只需将右下角的窗口向左展开，您就会明白我的意思。如果你想要比这更远，你是否试图扭曲和拉伸你的背景？ :-/ 上面的代码强制它 100% 高度但保持纵横比。哦，我把它从cover修改成了contain。
@ibholland 见上文。如果你无论如何都不能裁剪，你将打破你的纵横比。这可以接受吗？它会扭曲你的图像...Like this
我希望，Nicholas，但设计师不会接受任何变形或裁剪。我必须在不裁剪的情况下保持纵横比。

【解决方案2】：

最后一个答案令人费解。让我确定这是做什么的：

在这里查看：http://jsfiddle.net/SinisterSystems/8aLg3/9/

页面顶部的静态页眉
将保留在页面底部的静态页脚
实现了一个 jQuery 函数，该函数将在窗口中调整大小和大小，将图像大小调整到当前限制，而不会破坏纵横比。
BG 图像本来就是居中的。

javscript 的解决方案并不理想，但对于您要完成的任务来说是必需的。

HTML：

<div id="bkgHolder"></div>

<div class="wrapper">
    <div id="header">
        <h1>I'm the Sticky Header</h1>
    </div>
    <div id='content'>
        <p>Some content here</p>
    </div>
</div>

<footer class="footer">
  I'm the Sticky Footer.
</footer>

CSS：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#header {
    background:#CCC;
    height:50px;
}
#bkgHolder {
    background-image: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');
    background-repeat: no-repeat;
    background-position: center; 
    background-size:contain;
    width:100%;
    height:100%;
    position:absolute;
    margin-top:50px;
    z-index:-10;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -25px; 
  position:relative;
}
.wrapper:after {
  content: "";
  display: block;
}
.footer, .wrapper:after {
  height: 25px; 
}
.footer {
  background:#6AF;
}
p {
    color:#FFF;
}

jQuery 脚本添加：

$(function() {
    var h = $(window).height();
    var w = $(window).width();
    $('#bkgHolder').css({
        'width': w,
        'max-height': h-75,
    });
    window.onresize = function(event) {
        h = $(window).height();
        w = $(window).width();
        $('#bkgHolder').css({
            'width': w,
            'max-height': h-75,
        });
    } 
});

在这里查看：http://jsfiddle.net/SinisterSystems/8aLg3/9/

【讨论】：

这里有一个替代解决方案，似乎效果很好。