Question

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

问题

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

enter image description here

白色部分应垂直延伸。因此，内容部分必须增加高度（根据窗口高度）或我需要一个粘性页脚解决方案。我做了一些尝试，但没有一个对我有效（例如来自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-Solution

<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，例如如果你的容器有填充（添加到宽度）

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

1 个答案: