4

我已经用 CSS 实现了一个完整的、非滚动的背景图像。但是，当内容本身溢出页面时，不会出现滚动条，也无法看到内容。我曾尝试在我的一些 div 中使用“溢出：滚动”的各种变体，但无济于事；出现滚动条，但它们不滚动，或滚动不正确。我认为我的 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;
}
4

1 回答 1

6

您正在寻找的background-attachment:fixed不是position:fixed您可以像这样实现您想要的东西：

身体{
    背景图像：url（'图像/背景.jpg'）；
    背景位置：中心顶部；
    背景附件：固定；
    边距：0px；
    颜色：#000；
    字体系列：helvetica，时代；
    字体大小：16px；
}

哦，删除：

<div id="bg">
    <img src="images/background.jpg">
</div>

文件的一部分。

于 2012-09-01T16:31:06.090 回答