0

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

问题

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

在此处输入图像描述

白色部分应垂直延伸。所以要么内容部分必须增加高度（根据窗口高度），要么我需要一个粘性页脚解决方案。我尝试了一些方法，但没有一个对我有用（例如How do I force a DIV block to extend to a bottom even if it has no content? 中的提示，或者来自 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 解决方案会更好，但我没有找到任何解决方案。

4

1 回答 1

1

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

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

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

于 2012-10-23T16:38:43.360 回答