리사이즈시 메뉴 표시 줄 부분이 사라짐

Question

디자인중인 웹 사이트가 있는데 크기 조정 문제가 발생했습니다.

여기 내 웹 사이트는 Chromium 28.0에서 최대화되었을 때 : 이며 회색 메뉴 막대가 끝까지 보입니다. 그러나

, 나는 창 크기를 조정하기 위해 이동 :

그 사업부 (는 #header)에 대한 코드입니다

 
#header { 
    background-color: #dcdcdc; 
    border-bottom: 1px solid #e6e6e6; 
    padding: 27px 0; 
} 

그렇게 정해진 폭이 없습니다입니다.

무슨 일 이니?

편집 :

<div id="header"> 
     <div> 
      <div class="logo"> 
       <a href="index.html">Thumbnails</a> 
      </div> 
      <ul id="navigation"> 
       <li class="active"> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="features.html">Features</a> 
       </li> 
       <li> 
        <a href="news.html">News</a> 
       </li> 
       <li> 
        <a href="about.html">About</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 

편집 : 2013년 11월 1일 파이어 폭스 스크린 샷 : 2013년 11월 1일 다음은 헤더 내 HTML이야 내가 파이어 폭스에서 스크린 샷을 추가

문제는 바닥 글에도 영향을 미칩니다 (Chromium에서도 마찬가지입니다).

Answer 1

html + css를 단순화 한 후에 의도 한대로 작동하는 것으로 보이는 해결책을 찾았습니다. 문제는 패딩 + 여백을 설정 한 방식이라고 생각합니다.

html로 :

<div class="page-container"> 

    <header class="top-bar"> 
     <div class="inner"> 

      <h2 class="logo">Logo</h2> 

      <ul class="main-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Features</a></li> 
       <li><a href="#">News</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 

     </div> 
    </header> 

    <section class="main-content"></section> 

    <footer class="bottom-bar"> 
     <div class="inner"> 

      <span class="copyright">Copyright info here.</span> 

      <span class="contact">Contact info here.</span> 

     </div> 
    </footer> 

</div> 

</body> 

CSS의 :

body { 
    margin: 0; 
    padding: 0; 
} 

.page-container { 
    margin: 0; 
    padding: 0; 
} 



/* =============================================== 
/* ====== HEADER + NAVIGATION STYLES 
/* ============================================ */ 

.top-bar { 
    background: #EEE; 
    height: 100px; 
    text-align: center; 
} 

.inner { 
    background: #DDD; 
    display: block; 
    height: 100px; 
    margin: 0 auto; 
    width: 920px; 
} 

.logo { 
    background: #CCC; 
    display: block; 
    float: left; 
    font-size: 16px; 
    height: 30px; 
    line-height: 30px; 
    margin: 0; 
    padding: 35px 0; 
    width: 120px; 
} 

.main-nav { 
    display: block; 
    float: left; 
    height: 30px; 
    line-height: 30px; 
    margin: 0; 
    padding: 35px 0; 
} 

.main-nav li { 
    display: block; 
    float: left; 
    width: 160px; 
} 

.main-nav li a { 
    color: #999; 
    font-size: 14px; 
    text-decoration: none; 
} 

.main-nav li.active a, 
.main-nav li a:hover { 
    color: #F99600; 
} 



/* =============================================== 
/* ====== MAIN CONTENT PLACEHOLDER STYLES 
/* ============================================ */ 

.main-content { 
    background: #F6F6F6; 
    height: auto; 
    margin: 0 auto; 
    min-height: 500px; 
    width: 920px; 
} 



/* =============================================== 
/* ====== FOOTER ELEMENT STYLES 
/* ============================================ */ 

.bottom-bar { 
    background: #EEE; 
    height: 100px; 
} 

.bottom-bar .copyright, 
.bottom-bar .contact { 
    display: block; 
    font-size: 12px; 
    height: 30px; 
    line-height: 30px; 
    margin: 0; 
    padding: 35px; 
} 

.copyright { float: left; } 
.contact { float: right; } 

현재 작업 코드를 확인할 수 있습니다 http://jsfiddle.net/onestepcreative/X8QbD/