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

如果我理解得很清楚你可以通过删除这一行解决其中一个问题

height:100%;

来自#innerwrapper

如果你改变这个，当你调整背景大小时应该是应该

对于背景你可以使用background-attachment：fixed; http://www.w3schools.com/cssref/pr_background-attachment.asp

Answer 2

并解决您的其他问题，您可以使用以下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>

直接插入包装器中的innerwrapper之前......或其他任何地方都可以想到它。

修改

哦，删除

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

来自#innerwrapper

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

2 个答案: