전체 페이지의 하단에있는 스크롤 막대

Question

내 CSS가 전체 페이지에서 스크롤 막대를 일으키는 이유를 알아 내려고 노력했습니다.

Container 100% (width) 
    wrapper 80% 
    navMenu 100% 
    centerDoc 100% 

나는 최근에 (그 수평 메뉴 그래서 새로운 항목이 오른쪽에 추가) 다른 메뉴 항목을 추가했다 :

여기에 내 옛날 DIV 레이아웃 (아무 스크롤 문제가)입니다. 새 메뉴 항목을 추가 한 후 페이지 크기를 조정할 때 (작은 크기로 만들 때) 새 메뉴 항목이 첫 번째 메뉴 항목 아래 왼쪽 구석으로 축소됩니다.

이 문제를 해결하려면 난 다음에 내 레이아웃을 변경 :

Container 100% (width) 
    navMenu 100%  <-- moved navMenu out of wrapper 
    wrapper 80% 
    centerDoc 100% 

이것은 collpasing 문제를 해결했습니다. 하지만 이제 전체 페이지의 페이지 하단에 스크롤 막대가 있습니다. 그리고 난 그것을 제거하는 방법을 알아낼 수없는 것 :/

HTML 코드 :

<div id="conainer"> 
    <?php require_once 'includes/header.php'; 
      require_once 'includes/nav.php'; ?> 

    <div id="wrapper"> 

    <p>this is the wrapper</p> 

     <div id="centerDoc"> 
     <p>this is the centerDoc</p>  

    </div> <!--centerDoc !--> 
    </div> <!-- wrapper !-->   
     </div> <!--container !--> 

참고 :

: nav.php는 navMenu 사업부

CSS 스 니펫 (snippet)을 포함

#container { 
    margin:auto; 
    width: 100%; 
} 


#wrapper{ 

    width:80%; 
} 

#navMenu{ 

    /*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/ 
    margin-left:2px; 
    width:100%; 
    font-weight:normal; 
    font-size:15px; 

    /*this keeps the drop down menu on top*/ 
    position:relative; 
    z-index:50; 
} 


#centerDoc { 

    margin-top:2.8%; 
    margin-left:10px; 
    float:left; 
    width: 100%; 
} 

나는 이것이 길다는 것을 알고 있지만, 나는 그 문제를 해결하기위한 방향을 찾고있다. 감사!

Answer 1

container 클래스에 overflow: hidden;을 추가하면 스크롤을 숨길 수 있습니다.

그것은 다음과 같이해야합니다 :

#container { 
    margin:auto; 
    width: 100%; 
    overflow: hidden; 
} 

는 희망이 도움이!