在高度上扩展页面内容或在内容下显示白色背景

Question

我使用backstretch 作为背景图像，这样我就不会遇到分辨率问题。图像是一个纹理（它曾经有一个白色区域，应该是内容部分的背景颜色 - 在这里我没有遇到这样的问题，但其他问题）。现在中间的内容部分（包括页眉、页脚）应该有白色背景。

问题

如果内容不够高，我会在底部看到纹理，但它应该是白色的。这是页面底部的截图：

白色部分应垂直延伸。所以要么内容部分必须增加高度（根据窗口高度），要么我需要一个粘性页脚解决方案。我尝试了一些方法，但没有一个对我有用（例如来自 How do I force a DIV block to extend to the bottom of a page even if it has no content? 或 sticky footer solution from Ryan Fait 的提示）。

这是我页面的精简版。这是没有 jQuery 部分的JSFiddle。

HTML

<div id="header">
    <p>Introduction</p>
</div>
<div id="main-wrap">
    <div id="column1">
        <p>Menu</p>
    </div>
    <div id="column2">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="clearer"></div>
</div>
<div id="footer">
    <p>Some Links</p>
</div>

CSS

body {
    background-color: black;
}

#header {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}


#main-wrap {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}


#column1{
    float: left;
    width: 60px;
}


#column2{
    float: left;
    padding-left: 20px;
    width: 300px;
}

#footer {
    background-color: white;
    width: 380px;
    margin: 0 auto;
}

.clearer{
    float: none;
    clear: both;
}

我能想象的唯一可行的方法是使用 Javascript 计算页面底部的间隔 div ...该解决方案应该适用于所有主要浏览器（IE7-IE9、FF、Chrome、Opera、Safari )。

当前的 JS 解决方案

<script language="javascript" type="text/javascript">
    <!--
    $(document).ready(function(){
        $.backstretch("img/background.jpg");

        var headerheight = $('#header').height();
        var column1height = $('#column1').height();
        var column2height = $('#column2').height();
        var columnheight = Math.max(column1height, column2height);
        var footerheight = $('#footer').height();
        var contentheight = headerheight + columnheight + footerheight;
        var innerheight = $(window).height();
        // calculate height of content to fill out full height of window
        var height = innerheight - headerheight - footerheight;
        // only if the the content has not enough height
        if (contentheight < innerheight) {
            $('#main-wrap').css('min-height', Math.max(height, columnheight));
        }
    });
    -->
</script>

CSS 解决方案会更好，但我没有找到任何解决方案。

Answer 1

你可以让 jQuery 计算最小高度：

$(function() {
  $("the_content").css("min-height", Math.max(window.innerHeight, parseInt($("the_content").css("height"))));
})

当然你可以证明 window.innerHeight 是合理的，例如如果您的容器有填充（被添加到宽度）