【发布时间】：2014-12-01 03:13:30
【问题描述】：
我正在尝试创建一个带有顶部菜单栏区域的布局，然后是具有固定和覆盖背景的拆分 75 / 25 屏幕。
--------------------------------------------------------
| |
--------------------------------------------------------
| | |
| | |
| | |
| | |
| | |
| | |
--------------------------------------------------------
左侧的主区域应该像任何正常页面一样在 y 方向滚动。
顶部菜单栏应与主要内容一起滚动。
但是右侧区域的区域需要有一个固定的背景，该背景可以缩放并覆盖整个区域（使用 CSS 封面属性），并且是固定的 - 所以它不会滚动，始终覆盖该区域，并且始终可见。
我可以同时做部分事情，但不能同时做所有事情！
我可以得到 75/25 分割，得到顶部栏和分割，或者得到一个覆盖和固定背景，但不能让所有东西一起工作！
忽略顶部栏，此代码适用于除 rhs 背景位置之外的所有内容。背景到位并固定，rhs 背景缩放和覆盖，但它不在块内的正确位置：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.lhs {
width: 75%;
float: left;
background: url(lhs_bg.jpg) repeat left top;
}
.rhs {
width: 25%;
float: right;
background: url(rhs_bg_1.jpg) no-repeat left center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="lhs">
lhs
<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11
</div>
<div class="rhs">
rhs
<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11
</div>
</body>
</html>
数字只是用来显示内容滚动，并确保页面高于浏览器以强制它滚动。
我的猜测是背景图像的大小仍然覆盖全屏，而不是仅右侧区域的父 div 元素 - 因此您只能在 rhs 区域中看到完整图像的一部分，而不是完整图像。
有什么建议吗？！
【问题讨论】：
-
没有人会从头开始编写它...请显示一些代码。
-
很难在我尝试过的众多代码中仅添加一个 sn-p 代码，其中每个代码都做了一些事情，但没有其他事情！我现在已经在帖子中添加了一些代码。
-
把你的代码放到 JSfiddle.net
标签： html css background fixed