배너가 화면의 전체 너비를 차지하는 방법 CSS

화면의 전체 너비를 차지하려면 div 표시 줄이 필요합니다. 나는 폭을 사용하여 시도했다 : 1920px; 하지만 내 화면 해상도를 변경하면 스크롤 막대가 나타납니다. 나는 또한 폭을 시도했다 : 100 %; 그러나 그것도 작동하지 않았다!배너가 화면의 전체 너비를 차지하는 방법 CSS

CSS

#bar { 
    background: white; 
    font-family: Designio; 
    margin-top: -76px; 
    position: absoulte; 
    top: 115px; 
    padding: 15px; 
    height: 60px; 
    width: 1930px; 
    margin-left: -600px; 
    background-size: 100%; 
} 

body { 
    min-width: 768px; 
    margin: 0px; 
    background: #0e6585; 
    font-size: 40px; 
} 

img.top { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

#container { 
    height: 768px; 
    background: #0e6585; 
    font-family: Designio 
} 

#inner { 
    text-decoration: none; 
    box-shadow: inset 1px 1px 10px 2px #fff; 
    border-radius: 50px; 
    margin: 0 auto; 
    margin-top: 100px; 
    width: 800px; 
    height: 600px; 
    background: #0e6585; 
    padding: 20px; 
    color: #946e44; 
    text-align: center; 
} 

#nav a.active { 
    background-color: #0e6586; 
    color: white; 
} 

#nav { 
    height: 10px; 
    width: 100%; 
    float: left; 
    margin: 0 0 1em 0; 
    padding: 0px; 
    background-color: white; 
    margin-top: -10px; 
    border-bottom: 1px solid white; 
} 

#nav ul { 
    list-style: none; 
    width: 900px; 
    margin: 0 auto; 
    padding: 0; 
    text-align: center 
} 

#nav li { 
    float: left; 
    text-align: center 
} 

#nav li a { 
    margin-top: 15px; 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    color: #0e6585; 
    border-right: 1px solid #ccc; 
    text-align: center 
} 

#nav li a:hover { 
    color: #0e6586; 
    background-color: white; 
    text-align: center 
}

HTML

<!doctype html> 
<html> 
    <head> 
     <link rel="stylesheet" href="css/Primary.css"> 
    </head> 
    <body> 
     <div id="container"> 

      <div id="inner"> 

       <div style="margin-top: -120px"> 

        <div id ="bar"> 
         <div id="nav"> 
          <ul> 
           <li> 
           <li> 
            <a href="home.html" class="active">Home</a> 
           </li> 
           <li> 
            <a href="#">About</a> 
           </li> 
           <li> 
            <a href="#">Graphics</a> 
           </li> 
           <li> 
            <a href="#">Web Design</a> 
           </li> 
           <li> 
            <a href="#">Contact</a> 
           </li> 
          </ul> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

출처

2012-10-26 Cameron Howson

사용 마진 당신의 부모 DIV합니다.

.container 
{ 
    margin-left: 0px; 
    margin-right: 0px; 
}

바이올린 : 읽기의 또 다른 찢어 질 누락에 http://jsfiddle.net/PVKbp/

은, 당신의 #bar 요소는 절대적으로 내 다른 두 요소의 위치를 설정합니다. left: 0; right: 0이 제대로 작동하려면 컨테이너에서 꺼내야합니다 (컨테이너 내에 두지 않은 경우). 컨테이너 내에 있어야 할 경우 위에있는 여백 속성을 사용하여 컨테이너를 확장해야합니다.

출처

2012-10-26 19:16:06

학부모 div? 무슨 소리 야? –

귀하의 경우에는 '컨테이너'div. 나는 그것을 반영하여 편집 할 것이다. 나는 정직하게 학급 이름을 보지 않았다. –

코드를 #container에 넣었습니다. 작동하지 않았습니다. –

뷰포트 너비를 채우기 위해 요소를 가져 오려면 뷰포트의 너비를 채우는 요소 (예 : body, 자손 div는 body)는 절대적으로 배치되어야하며 요소의 자손 만 가져야합니다. 너비 설정), 또는 고정 위치 여야합니다. 그런 다음 요소는 left: 0 및 right: 0이어야합니다.

이에 #bar 룰을 변경

#bar{ 
    background:white; 
    font-family:Designio; 
    position:absolute; 
    left: 0; 
    right: 0; 
    padding:15px; 
    height:60px; 
    background-size:100%;  
}

요약 :