我正在为我学校的学生建立一个网站，但我遇到了一个小问题。当我向左或向右滚动时，我的背景不会覆盖整个页面，只是在滚动之前页面的一侧停止，但当您使浏览器窗口变宽时，问题就会消失。
html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SST Student Home</title>
<LINK REL="SHORTCUT ICON" HREF="favicon.ico" type="image/x-icon">
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- This CSS is just boring -->
<link href="css/menu2.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
<!-- CSS slider -->
<link href="css/slider/reset.css" rel="stylesheet" type="text/css" />
<!-- This CSS creates a ninja that kicks the butt of any browser that rebels against conformity *cough*IE*cough* -->
<link href="css/slider/main.css" rel="stylesheet" type="text/css" />
<!-- This CSS creates the magic for the slider -->
<link href="css/scrollbar.css" rel="stylesheet" type="text/css" />
<!-- Meta Tags -->
<meta name="Description" content="The Beaverton School of Science and Technology's website for the students currently in attendence. Contains information on school assignments, clubs, staff, and more!" ></meta>
<meta name="Keywords" content="sst, student, science, technology, highschool"></meta>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Philosopher:400,700|Aldrich|Macondo|Akronim' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <a href="http://www.google.com" class="roll"><span>hello</span></a> -->
<!--[if IE]>
Errors may occur in Internet Explorer. Assimilate <a href="https://www.google.com/intl/en/chrome/browser/">here</a> to properly view this page.
<![endif]-->
<noscript>
Errors may occur if javascript is not enabled.
</noscript>
<header>
<div id="headdiv" >
<img id="headimage" src="logo3croped2colorinvert.png" alt="logo3"/>
</div>
</header>
<div body="backround">
<nav>
<div menu="menu" >
<ul menu="menu">
<li menu="active"><a menu="active", href="#home">Home</a></li>
<li menu="null"><a menu="null", href="http://www.ssthub.com/homepage.html">News</a></li>
<li menu="null"><a menu="null", href="#clubs">Clubs</a></li>
<li menu="null"><a menu="null", href="#quotes">Quotesbook</a></li>
<li menu="null"><a menu="null", href="#contact">Contact</a></li>
<li menu="null"><a menu="null", href="#about">About</a></li>
</ul>
</div>
</nav>
<br></br>
<br></br>
<br></br>
<div class="container">
<div id="slider">
<div id="mask">
<ul>
<li>
<a href="#" title="View my first image link"><img src="images/snow.png" /></a>
</li>
<li>
<a href="#" title="View my second image link"><img src="images/robot.png" /></a>
<span>
<h2>Image Caption</h2>
<p>Lorem ipsum dolor...</p>
</span>
</li>
<li>
<a href="#" title="OSU MoMo"><img src="images/momo.png" /></a>
<span>
<h2>Image Caption</h2>
<p>Lorem ipsum dolor...</p>
</span>
</li>
<li>
<a href="#" title="View my third image link"><img src="images/ball.png" /></a>
</li>
</ul>
</div>
<div id="progress">
</div>
<div id="overlay">
</div>
<div id="pause">
</div>
</div>
</div>
<br></br>
<center class="bodycontainer">
<div body="c1" body="cbackround">
Small batch assumenda messenger bag keytar, fingerstache laboris kale chips vinyl est selvage you probably haven't heard of them pop-up enim cliche mixtape. Cray stumptown narwhal mustache minim, bushwick nihil synth ut odd future est accusamus proident yr nisi. Cliche lo-fi messenger bag mixtape raw denim, vice ut pinterest fugiat biodiesel. Kale chips voluptate mixtape mumblecore, duis eiusmod aesthetic pop-up. Four loko skateboard direct trade sed labore +1, retro hoodie reprehenderit portland. Shoreditch incididunt sartorial jean shorts quis, organic deserunt PBR vinyl laborum helvetica sriracha. Ethical minim irure single-origin coffee magna gastropub mollit in, gentrify wayfarers pop-up qui aesthetic quis.
</div>
<div body="c23holder">
<div body="c2" body="cbackround">
Cray cardigan kogi kale chips brooklyn, anim lomo you probably haven't heard of them pour-over pickled sapiente incididunt id. Elit qui vice non magna occupy odio, post-ironic placeat. Excepteur williamsburg occupy, echo park post-ironic butcher authentic in irony ad brooklyn. Ethical nostrud consequat laborum, fingerstache next level food truck aliquip. Viral adipisicing consequat you probably haven't heard of them, narwhal fanny pack nulla mustache irure banh mi biodiesel. Gastropub voluptate godard, minim ethical +1 skateboard organic mustache put a bird on it post-ironic truffaut. Four loko truffaut helvetica street art VHS, irure small batch ethnic williamsburg synth consequat.
</div>
<div body="c3" body="cbackround">
Mixtape carles magna next level PBR, wolf placeat. Ethnic DIY swag carles mlkshk eiusmod, quis pour-over magna viral. Letterpress labore freegan, wes anderson mumblecore raw denim typewriter bushwick do ennui 3 wolf moon. Authentic kale chips odio fingerstache culpa, proident you probably haven't heard of them consequat beard ea ex velit. Voluptate street art tattooed, cillum quis terry richardson dreamcatcher wolf banksy mollit. Aliquip sint irure mollit non pop-up. Nostrud keytar synth duis williamsburg leggings butcher, delectus proident wes anderson.
</div>
</div>
</center>
<footer class="footer">
<div footer="1">
<div footer="image">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US">
<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" />
</a>
<a href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-graphics-multimedia-performance.png" width="107.3438" height="30" alt="HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, Multimedia, and Performance & Integration" title="HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, Multimedia, and Performance & Integration">
</a>
</div>
</div>
<div body="c23holder">
<div footer="2">
what
</div>
<div footer="3">
</div>
</div>
</footer>
</div>
</body>
</html>
css
menubackround{
}
nav {
clear:left;
float:left;
padding:0;
border-top:5px solid #370070;
width:100%;
overflow:hidden;
font-family: 'Marcellus SC', serif;
position:relative;
}
div[menu]
{
height:60px;
}
ul[menu]
{
float:left;
margin:0;
padding:0;
list-style:none;
position:relative;
left:5%;
text-align:center;
}
ul[menu] li[menu] {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:5%;
}
ul[menu] li[menu="null"] a[menu="null"] {
display:block;
float:left;
margin:0 1px 0 0;
padding:30px 10px 6px 10px;
background:#A30001;
text-decoration:none;
color:#fff;
}
ul[menu] li[menu="active"] a[menu="active"] {
display:block;
float:left;
margin:0 1px 0 0;
padding:35px 10px 6px 10px;
background:#AA0000;
text-decoration:none;
color:#fff;
}
ul[menu] li[menu="null"] a:hover[menu="null"] {
padding:35px 10px 6px 10px;
background:#700000;
}
ul[menu] li[menu="active"] a:hover[menu="active"] {
padding:40px 10px 6px 10px;
background:#700001;
*{
margin: 0;
padding: 0;
background="fixed";
}
#headdiv{
background-color:#000033;
width: 100%;
height:100px;
}
#headimage{
background-color:#000033;
clear:left;
padding:0;
width: 500px;
}
#ieerror{
opacity: 0%;
}
center{
height:400px;
}
div[body="backround"]{
width: browserwidth px;
height: browserheight px;
background: -moz-linear-gradient(top, #000033 0%, #005596 7%, #005596 26%, #005596 42%, #005596 57%, #008bb2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000033), color-stop(7%,#005596), color-stop(26%,#005596), color-stop(42%,#005596), color- stop(57%,#005596), color-stop(100%,#008bb2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000033 0%,#005596 7%,#005596 26%,#005596 42%,#005596 57%,#008bb2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000033 0%,#005596 7%,#005596 26%,#005596 42%,#005596 57%,#008bb2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #000033 0%,#005596 7%,#005596 26%,#005596 42%,#005596 57%,#008bb2 100%); /* IE10+ */
background: linear-gradient(to bottom, #000033 0%,#005596 7%,#005596 26%,#005596 42%,#005596 57%,#008bb2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000033', endColorstr='#008bb2',GradientType=0 ); /* IE6-9 */
}
body {
min-width: 700px;
padding:0px;
margin:0 auto;
font-family:Tahoma, Geneva, sans-serif;
\\\\\\background-color:#005596; //#0033CC #FFCFA2
background: ##005596; /* Old browsers */
font-size:16px;
line-height:22px;
text-shadow:1px 1px 1px #362c30;
}
.roll:hover {text-decoration:none;}
.roll span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.roll:hover span {
background: #DD4D42;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.container {
width:960px;
margin:auto;
overflow:visible;
}
.bodycontainer {
width:1260px;
margin:auto;
overflow:visible;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
a
{
text-decoration:none
}
#body{
width:900px;
height:400px;
position:relative;
margin:0px auto 0;
}
li[body="backround"]{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#EEEEEE;
min-width:300px;
border-radius:25px;
-moz-border-radius:25px;
}
div[body="c1"]{
float:left;
float:up;
position:relitive;
top:0;
width:400px;
height:370px;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
background: -moz-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%, rgba(192,192,192,0.88) 2%, rgba(192,192,192,0.17) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color- stop(0%,rgba(192,192,192,0.88)), color-stop(2%,rgba(192,192,192,0.88)), color-stop(100%,rgba(192,192,192,0.17))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0c0c0c0', endColorstr='#2bc0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div[body="c23holder"]{
float:right;
float:up;
position:relitive;
top:0;
width:830px;
}
div[body="c2"]{
float:left;
position:relitive;
float:up;
top:0;
width:400px;
height:370px;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
background: -moz-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%, rgba(192,192,192,0.88) 2%, rgba(192,192,192,0.17) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(192,192,192,0.88)), color-stop(2%,rgba(192,192,192,0.88)), color-stop(100%,rgba(192,192,192,0.17))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0c0c0c0', endColorstr='#2bc0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div[body="c3"]{
float:right;
float:up;
position:relitive;
top:0;
width:400px;
height:370px;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
background: -moz-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%, rgba(192,192,192,0.88) 2%, rgba(192,192,192,0.17) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color- stop(0%,rgba(192,192,192,0.88)), color-stop(2%,rgba(192,192,192,0.88)), color- stop(100%,rgba(192,192,192,0.17))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0c0c0c0', endColorstr='#2bc0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div[nojs="nojs"]
{
font-family:Tahoma, Geneva, sans-serif;
color:#ff0000;
font-size:50px;
}
div[body="cbackround"]{
background: -moz-radial-gradient(center, ellipse cover, rgba(1,3,5,1) 0%, rgba(0,85,150,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color- stop(0%,rgba(1,3,5,1)), color-stop(100%,rgba(0,85,150,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(1,3,5,1) 0%,rgba(0,85,150,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(1,3,5,1) 0%,rgba(0,85,150,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(1,3,5,1) 0%,rgba(0,85,150,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(1,3,5,1) 0%,rgba(0,85,150,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010305', endColorstr='#005596',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
footer
{
clear: both;
z-index: 10;
float:center;
padding:-30;
position: relative;
width: 100%;
bottom: 0;
color:#ffffff;
background-color:#000000;
font-family:Tahoma, Geneva, sans-serif;
font-size:8px;
max-height:30px;
overflow:hidden;
}
div[footer="23holder"]{
float:right;
position:relative;
text-align:center;
text-decoration:none;
width: 67%;
left:75%;
}
div[footer="1"]{
float:left;
position:relative;
text-align:left;
text-decoration:none;
width: 33%;
}
div[footer="2"]{
float:left;
position:relative;
text-align:center;
text-decoration:none;
width: 33%;
}
div[footer="3"]{
float:right;
position:relative;
text-align:right;
text-decoration:none;
width: 33%;
}
div[footer="small"]{
font-size:12px;
float:right;
width: 1%;
}
div[footer="image"]{
float:left;
width: 99%;
}
还有一些滑块的css，如果你需要它我没有发布我也可以发布。
我是这个论坛的新手，所以请求原谅我的造型问题。
答案 0 :(得分：0)
您需要修复width的{{1}}，有办法解决问题。要么您决定网站的最佳解决方案，请相应地设置body，就像width分辨率一样，选择1024x768作为width。
这也可以使用JavaScript动态完成，其中1000px width根据客户端计算机的分辨率在运行时决定。
JavaScript代码：
body