Question

我正在尝试开发一个布局问题。我基本上已经将视口分成2个相等宽度的div，每个div都有不同的背景平铺图像。

我将它全屏拉伸100％，但滚动时出现问题。

背景图像被裁剪为视口的原始高度..！

这是html：

<body>

<div id="container">

        <div id="left" class="half">
        left content here
        </div>

        <div id="right" class="half">
            right content here
        </div>
</div>

</body>

这是css：

html, body {
    margin:0;
    padding:0;
    height:100%;
    font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    color: #505050;
}

div#container {
    height: 100%;
    min-width: 800px;
    min-height: 500px;
}

div.half {
    height: 100%;
    width: 50%;
}

div.half#left {
    float: left;
    text-shadow: 0px 1px 1px white;
    background-image: url(images/metalBG.jpg);
}

div.half#right {
    float: right;
    text-shadow: 0px -1px 1px black;
    background-image: url(images/fabricBG.jpg);
}

我想知道这可能是一个javascript，因此也包含在这只猫中。

Answer 1

我会使用Firebug或类似方法来验证它是背景问题，而不是DIV大小调整问题。也许剪裁的不是你的BG图像，而是你的DIV的高度。

如果不是这种情况，您可以尝试添加

background-repeat:repeat,

到你的div.half的CSS，但这已经是默认值了，所以除非你有一些覆盖它的CSS，否则应该就位。

Answer 2

这似乎让我得到了我想要的结果，虽然没有在资源管理器中测试过。

html {
    margin:0;
    padding:0;
    font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    color: #505050;
    background-image: url(images/metalBG.jpg);
}

body {
    float:right;
    margin:0;
    padding:0;
    width:50%;
    background-image: url(images/fabricBG.jpg);
}

#left {
    float:left;
    margin-left:-600px;
    width:550px;
}

Answer 3

我没有运行此代码，但将其添加到现有代码应该工作（我希望：P）。您可以使用以下内容保持div和背景的固定：

 .half{
    position:fixed; /* keeps the divs in the same place */
    overflow:auto;  /* overflowing content will scroll */
    background-attachment:fixed; /* the background won't scroll with content */
 }

100％背景图块，100％高度div

3 个答案: