我已经使用CSS实现了一个完整的非滚动背景图像。然而,当内容本身超出页面时,没有滚动条出现,也无法看到内容。我尝试在我的一些div中使用各种变化的"overflow: scroll",但是都没有成功;滚动条出现了,但它们不能滚动,或者不能正确地滚动。我认为我的div可能存在结构问题,但我对CSS并不是特别熟悉,在StackOverflow上也找不到类似的线程。
http://jsfiddle.net/YXp5p/
<body>
<div id="bg">
<img src="images/background.jpg">
</div>
<div id="wrapper">
<div id="header">
thread #6bUp0
</div>
<div id="sidebar">
<div id="content">
<div id="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat ante, placerat accumsan aliquam at, rhoncus eget nunc.
</div>
</div>
</div>
</div>
</body>
body{
margin: 0px;
color: #000;
font-family: helvetica, times;
font-size: 16px;
}
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
#wrapper {
position: fixed;
top:0%;
left:18%;
width: 59%;
height:200%;
padding: 0%;
}
#header {
background: url(images/header.gif) repeat-x;
border: 1px solid black;
width: 100%;
height:29px;
padding-left: 3%;
padding-right: 3%;
padding-top: 6px;
font-family: "Lucida Console", "Courier New", sans-serif;
text-align: center;
font-size: 20px;
font-weight: bold;
}
#sidebar {
background-color: #EEEEEE;
width: 100%;
height: 100%;
padding-left: 3%;
padding-right: 3%;
right: 3%;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
border-left: 1px solid #000;
border-right: 1px solid #000;
opacity: 1;
padding-top: 8px;
}
#post{
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
background-color: #FFF;
opacity: 1;
}