我正在尝试为我学校的学生制作一个网站，但我遇到了一个小问题。当我向左或向右滚动时，我的背景不会覆盖整个页面，它只会停在滚动前页面的一侧，但是当您使浏览器窗口变宽时，问题就会消失。
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%;
}
还有一些 slider 的 css，如果您需要我没有发布，我也可以发布。
我是这个论坛的新手，所以请原谅我的样式问题。
最佳答案
您需要修复body 的width，有多种方法可以做到。您可以决定网站的最佳分辨率并相应地设置 width，例如对于 1024x768 分辨率，选择 width 作为 1000px.
这也可以使用 JavaScript 动态完成，其中 body 的 width 由运行时决定，具体取决于客户端计算机的分辨率。
JavaScript 代码:
var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth) {
theWidth = window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth) {
theWidth = document.documentElement.clientWidth;
}
else if (document.body) {
theWidth = document.body.clientWidth;
}
if (window.innerHeight) {
theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
theHeight = document.body.clientHeight;
}
if (screen.width > theWidth) {
theWidth = screen.width;
}
cssCode = 'body{
width:' + (theWidth - 20) + 'px;
min-height:' + (theHeight - 50) + 'px;
margin:0;
}';
addCss(cssCode);
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
关于html - 背景不在屏幕区域之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13097732/