CSS:修复 div 的溢出问题并修复背景图像

Question

我正在制作一个网站，但我的 CSS 很糟糕，所以我遇到了一些我不确定如何处理的问题。

这是我在这里工作的网站: http://www2.hawaii.edu/~akinsey/sandbox/broken/

我有两个主要问题。第一个是，当内容流过页面底部时，它会弄乱内容 div 上的背景。我怎样才能做到这一点，当文本溢出页面时，内容 div 的平铺不会停止(如果您滚动到上面链接的底部，您可以看到我在说什么)。我很确定会发生这种情况，因为我正在为主 div 包装器使用固定位置。我这样做的原因是内容 div 会一直延伸到底部。如果没有固定位置，它会一直延伸到底部，但它会导致页面上有一个垂直滚动条，即使页面上没有内容。

我遇到的第二个问题是右侧的夏威夷图案背景图像。我不太确定如何做到这一点:我希望图像准确地位于现在的位置，但当前当您滚动时，特定的背景图像也会滚动。本质上，我希望它附加到所有页面内容的右侧(就像现在一样)，并且即使在您调整页面大小时或滚动时也能保持在该位置。

基本上我希望网页看起来像这个版本: http://www2.hawaii.edu/~akinsey/sandbox/index2.html

但是有一个不会弄乱所有背景图像的工作滚动条。

这是我当前的 CSS:

html { text-align: center; margin:0; padding:0; height:100%; }
body { text-align: center; margin:0; padding:0; height:100%; background-image:url('../image/bg.gif'); background-repeat:repeat-x; }
#wrapper { height:100%; width:100%; margin:0 auto; position: fixed; }
#innerwrapper { margin-left:auto; margin-right:auto; width:975px; height:100%; background-image: url("../image/hawaiianpattern.gif"); background-repeat:no-repeat; background-position: right top; }
#header { margin-left:auto; margin-right:auto; width:810px; background-image:url('../image/header1.png'); height:100px; }
#navbar { margin-left:auto; margin-right:auto; width:800px; height:35px; background-image: url('../image/navbg.gif'); background-repeat:repeat-x; }
#content { margin-left:auto; margin-right:auto; width:804px; height:100%; background-image: url('../image/contentbg.gif'); background-repeat:repeat-y; }
#contentholder { padding-top:10px; text-align:left; margin-left:auto; margin-right:auto; width:90%; height:100%; }

这是随附的 html:

<!-- Site Wrapper -->
<div id="wrapper">
    <div id="innerwrapper">
    <!-- Header -->
    <div id="header"></div>

    <!-- Navigation Bar -->
    <div id="navbar">
        <ul class="lavaLampNoImage" id="1">
            <li id="l1" class="current"><a id="n1" class="navlink" style="color:black" href="#">Home</a></li>
            <li id="l2" ><a id="n2" class="navlink" href="#">About</a></li>
            <li id="l3" ><a id="n3" class="navlink" href="#">Forum</a></li>
            <li id="l4" ><a id="n4" class="navlink" href="#">Contact</a></li>
        </ul>
    </div>

    <!-- Content -->
    <div id="content">
    <div id="contentholder">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus urna, ut consequat nibh. In ut pharetra nisl. Etiam vitae ante sed sem fermentum lobortis. Cras ac varius magna. Nunc fringilla dolor id diam lobortis dapibus. Etiam lobortis, elit vitae lobortis sagittis, lacus orci cursus ligula, ut suscipit libero est eu odio. Mauris tellus est, tristique id convallis tincidunt, placerat at enim. Sed augue ante, molestie a tempus a, vehicula nec ligula. Etiam rhoncus, est eget ultrices pulvinar, ipsum enim congue velit, quis lobortis neque lacus non neque. Sed accumsan felis id neque cursus lacinia. Donec vitae leo ut ante aliquam hendrerit. Morbi commodo, lacus at pretium tristique, justo ante fermentum metus, eget condimentum augue turpis quis urna. Fusce eu erat eget dolor consequat vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
        <p>
        Fusce vestibulum vestibulum tortor, sit amet molestie sem euismod eget. Nullam ornare felis ut urna consectetur ut vestibulum risus lacinia. Etiam ligula libero, pharetra sit amet eleifend vel, tincidunt pulvinar magna. Nullam lacinia auctor sollicitudin. Praesent et leo dolor. Etiam lacinia, nisi at aliquet dignissim, tellus ante aliquet arcu, tincidunt facilisis magna nibh cursus tellus. Ut sed orci non justo eleifend luctus id a purus. Etiam pulvinar libero eget purus malesuada a blandit sapien bibendum. Integer laoreet accumsan pulvinar. Proin lobortis molestie odio sed mollis. Aliquam nec dui id erat molestie aliquam eu et risus. Suspendisse ipsum urna, iaculis eget ornare vitae, commodo a enim. Phasellus adipiscing diam eget ante dapibus dictum. Fusce quis massa a diam rhoncus varius eu quis orci. Integer ac urna nibh. Pellentesque ornare nisl sit amet elit euismod aliquet.
        </p>
        <p>
        Nulla egestas dolor sed mi pellentesque auctor. Aliquam dictum congue felis et tempus. Duis eu imperdiet diam. Morbi tristique ornare dapibus. Proin laoreet pellentesque enim. Proin a orci est. Aliquam quis sapien at risus vestibulum dignissim. Donec augue erat, egestas et ornare quis, pulvinar non felis. Donec tincidunt leo nec justo rhoncus varius. Phasellus odio nunc, porta et lobortis quis, luctus vel quam. Maecenas vehicula dictum vehicula. Integer mollis risus nisl. Donec feugiat congue urna, nec elementum orci rhoncus quis. Morbi sit amet elit odio, et aliquam tortor. Donec porttitor ullamcorper lacus, a commodo justo fringilla vel. Ut vel est ut arcu euismod pulvinar at vel ligula. Aliquam vestibulum turpis in mauris venenatis sit amet elementum mi blandit.
        </p>

        </div>
    </div>
       </div>
</div>

非常感谢任何帮助。

提前致谢，安东尼

更新:

感谢下面 Joseph 的建议，我能够解决背景图案滚动的问题。更新后的页面可以在这里看到:

http://www2.hawaii.edu/~akinsey/sandbox/broken/index2.html

现在，当有足够的内容来填充页面时，一切看起来都很棒，但是当没有内容 div 和 bgwrap div 时，它不会扩展以填充页面，结果看起来像这样:

http://www2.hawaii.edu/~akinsey/sandbox/broken/

再次感谢您的帮助!

Answer 1

要解决您的其他问题，您可以使用以下 HTML

<div id="bgwrap" style="width: 975px; height: 100%; position: fixed; left: 50%;
margin-left: -495px; background-image: url(&quot;../image/hawaiianpattern.gif&quot;); 
background-repeat: no-repeat;  background-position: right top; z-index: -1;"></div>

直接插入到 wrapper 中的 innerwrapper 之前...或任何其他想到它的地方。

编辑

哦，删除

background-image:url('../image/header1.png');

来自#innerwrapper