윈도우를 최소화 할 때 가로 스크롤 막대 버그

Question

코딩하는 CSS에 약간의 어려움이 있습니다.

창을 최소화 할 때마다 가로 스크롤 막대가 나타나고이 스크롤 막대의 문제점은 창을 최대화해도 사라지지 않는다는 것입니다.

내가 잘못 할 수 있습니까? 사전에

감사

CSS

body { 
    background-color: #C5C5C5; 
    margin-left: 0px; 
    margin-top: 0px; 
} 

html { 
    overflow-y: scroll; 
} 

.header_bg { 
    background-color: #F1F1EE; 
    padding: 10px 10px 10px 10px; 
    border-top: 2px solid #738ebe; 
    width: 100%; 
} 

.header_main { 
    width: 960px; // would it be better to change this to width: 80% 
    margin:0 auto; 
    overflow: hidden; 
} 

.header_main img { 
    float: left; 
} 

.header_main div { 
    float: right; 
} 

HTML

<div class="header_bg"> 
    <div class="header_main"> 
     <img src="resources/img/login_logo.png" width="163" height="66" /> 
     <div>Already a member? Sign in</div> 
    </div> 
</div>​ 

Answer 1

이 :

.header_bg { 
    background-color: #F1F1EE; 
    padding: 10px 10px 10px 10px; 
    border-top: 2px solid #738ebe; 
    width: 100%; 
} 

컨테이너의 계산 된 너비에 body 인 에 맞게 늘어나는 값이 추가되어 패딩이 body 크기가 뷰포트를 벗어나 이동하여 scroll-x을 트리거합니다.

그것은 당신의 스크롤 막대를 제거 멀리 간다 :

이

padding: 10px 0; 

편집 : http://jsfiddle.net/userdude/782fc/2/

전체가 : http://jsfiddle.net/userdude/782fc/2/embedded/result 대안으로

또는,에 width을 넣어 body 그래서를 자동 margin: 0 auto;와 센터 :

body { 
    background-color: #C5C5C5; 
    width: 1024px; 
    margin: 0 auto; 
} 

... 

.header_bg { 
    background-color: #F1F1EE; 
    padding: 10px; 
    border-top: 2px solid #738ebe; 
    width: 100%; 
} 

.header_main { 
    width: 100%; 
    margin:0 auto; 
    overflow: hidden; 
} 

편집 : 전체 http://jsfiddle.net/userdude/782fc/4/

: http://jsfiddle.net/userdude/782fc/4/embedded/result/