Question

可能重复：
Get CSS Div to fill available height

基本上我有一个CSS设置如下：

   body {
        font-family: "Open Sans", Arial, sans-serif;
        background: url(images/body-background-gradient.png) repeat-x #343434;
        text-align: center;
    }
    #background-tile {
        background: url(images/body-background-tile.png) repeat;
        width: 100%;
        min-height: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
    }

HTML：

<body>
    <div id="background-tile"></div>
        ...
</body>

身体具有水平重复的背景渐变。我在体内有一个空div（＃background-tile），它作为叠加背景 - 只是一个重复的2x2像素方形图案。

问题是，当页面延伸到浏览器的高度以上时，平铺图案不会继续填充剩余的背景，所以我最终得到了页面底部的一个部分平铺的背景 - 只是灰色的背景。我做了很多搜索，但找不到合适的解决方案。

屏幕截图：http://i46.tinypic.com/9i94xf.png

任何帮助非常感谢。感谢。

Answer 1

删除此

width: 100%;
        min-height: 100%;
        height: auto;

它将尺寸设置为您正在使用的屏幕的高度...而不是整个网页。如果该代码与代码的任何其他部分相关，那么您可能需要找到解决方法。

Answer 2

尝试为body提供relative的位置，.background-tile高度为100%（并摆脱min-height）

绝对定位的重复背景不会拉伸以填充页面

2 个答案: