배경 화면 밖의 영역이 아님

학교의 학생들을 위해 웹 사이트를 만들려고하지만 약간의 문제가 있습니다. 내 왼쪽 또는 오른쪽으로 스크롤 할 때 내 배경이 전체 페이지를 덮지 않고 스크롤하기 전에 페이지의 측면이 멈춰 있지만 브라우저 창을 넓히면 문제가 사라집니다.배경 화면 밖의 영역이 아님

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>

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가 CSS를.

나는이 포럼에 새롭기 때문에 내 스타일링 문제를 용서해줍니다.

출처

2012-10-27 Caspen

당신은 "고정"'배경 = 같은 CSS에서 오류가'와'\\\\\\ 배경 색 : # 005596', 먼저 수정해야한다. (나는 두 번째가 그것을 주석으로 감추려는 시도이지만 실제로 작동하지 않는다는 것을 알고있다.) –

나는 더 명확하게 사진을 추가 할 수 있지만 나는 기울이지 않는다. – Caspen

그러나 어딘가에서 스크린 샷을 업로드 할 수있다. 그런 다음 링크를 제공하십시오. –

body의 width을 수정해야합니다. 그 방법이 있습니다. 웹 사이트에 가장 적합한 해상도를 결정하고 그에 따라 width을 설정하십시오. 1024x768 해상도의 경우 width을 1000px으로 선택하십시오.

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

배경 화면 밖의 영역이 아님

답변

관련 문제