背景不在屏幕外區

我想爲學校的學生製作一個網站，但我遇到了一個小問題。當我向左或向右滾動時，我的背景並未覆蓋整個頁面，只是在滾動頁面的一側時停止，但當您將瀏覽器窗口變寬時，問題消失。背景不在屏幕外區

的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 &amp; Effects, Multimedia, and Performance &amp; Integration" title="HTML5 Powered with CSS3/Styling, Graphics, 3D &amp; Effects, Multimedia, and Performance &amp; 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對我，如果你需要它，我可以張貼以及未發佈的滑塊。

我是新來的這個論壇，所以請原諒我的造型問題。

來源

2012-10-27 Caspen

你在你的CSS錯誤，如'背景= 「固定」'和'\\\\\\背景顏色：＃005596'，你應該先糾正。（我知道第二個是試圖通過評論它來隱藏它，但那是行不通的，使用真實的評論。） –

我會添加圖片使其更清晰，但我不能 – Caspen

但是你可以上傳一個截圖的地方然後提供一個鏈接。 –

您需要修復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); 
}

來源

2012-10-27 07:08:33

真誠的款式道歉。我是這個論壇的新成員。適應它 –

所以到底如何使用這個我只是把它放在文件中，並在標題中調用它？ – Caspen

背景不在屏幕外區

回答

相關問題