Javascript 100%背景平铺，100%高度刻度
我有一个布局问题，我正试图发展。 我基本上已经将视图端口分割为两个等宽的div，每个div中都有不同的背景平铺图像 我有它拉伸全屏100%，但有一个问题，滚动 背景图像将被剪切到视口的原始高度 以下是html：Javascript 100%背景平铺，100%高度刻度,javascript,jquery,css,Javascript,Jquery,Css,我有一个布局问题，我正试图发展。 我基本上已经将视图端口分割为两个等宽的div，每个div中都有不同的背景平铺图像 我有它拉伸全屏100%，但有一个问题，滚动 背景图像将被剪切到视口的原始高度 以下是html： <body> <div id="container"> <div id="left" class="half"> left content here </div> <
<body>
<div id="container">
<div id="left" class="half">
left content here
</div>
<div id="right" class="half">
right content here
</div>
</div>
</body>
我想知道是否可能是一个javascript，因此也包含在这个cat中。我会使用Firebug或类似工具来验证这是一个背景问题，而不是分区大小问题。也许剪辑的不是你的背景图像，而是你的div的高度 如果不是这样，您可以尝试添加
background-repeat:repeat,
为
div.halfhtml {
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;
}
我还没有运行这段代码，但将其添加到现有代码中应该可以工作（我希望：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%高度将使div作为浏览器窗口大小的高度。因为它不在折叠下面，所以当你滚动时，图像将在窗口高度的100%处停止。我在路上，所以我没有足够的时间给出一个完整的答案，但这可能会帮助你在你的追求。是的仔细检查，这看起来像是发生什么。所以有没有办法，让左和右div保持100%高度滚动。我的猜测是，这将涉及javascript。如果html将保持100%的滚动，也许我可以使主体绝对，而主持会议的divs也绝对。更改主体的宽度和位置是一种有趣的方法，我以前从未见过：）只需注意窗口大小；考虑到您的边距看起来像是使用像素（尽管这可能是您正在寻找的）？
.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 */
}