두 개의 스크롤바가 발생하는 이유는 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 


.parent { 
    height: 100vh; 
    overflow: auto; 
} 

.first { 
    height: 100vh; 
} 
.second { 
    height: 100vh; 
} 
</style> 
</head> 
<body> 


<div class="parent"> 
    <div class="first"> 
    <h1>haha</h1> 
    </div> 
    <div class="second"> 
    <h1>haha</h1> 
    </div> 
</div> 


</body> 
</html>

데모 :이 코드는 왼쪽에 두 개의 스크롤을 줄 것이다 http://codepen.io/anon/pen/zxKmyq 두 개의 스크롤바가 발생하는 이유는 무엇입니까?

. 우리가

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 


* { <!-- this is the only modification I made compared to the first code --> 
    margin:0;  
    padding:0; 
} 

.parent { 
    height: 100vh; 
    overflow: auto; 
} 

.first { 
    height: 100vh; 
} 
.second { 
    height: 100vh; 
} 
</style> 
</head> 
<body> 


<div class="parent"> 
    <div class="first"> 
    <h1>haha</h1> 
    </div> 
    <div class="second"> 
    <h1>haha</h1> 
    </div> 
</div> 


</body> 
</html>

데모에 코드를 변경하는 경우

그러나 :

http://codepen.io/anon/pen/gbwBQK 그런 다음 바람직하다 하나의 스크롤,이있을 것이다.

그러나 이것이 어떻게 작동하는지, 즉이 간단한 수정으로 인해 스크롤바가 변경되는 이유는 알 수 없습니다.

출처

2014-12-28 user2901156

귀하의 질문은 무엇입니까? 구체적으로 말하십시오. – simeg

모든 브라우저가 아니더라도 대부분의 브라우저가 body 요소에 8px의 기본값 인 margin을 가지고 있기 때문입니다.

이 기본 여백이 있으면 브라우저의 높이가 더 이상 100%이 아닙니다. 따라서 스크롤 막대가 있습니다.

특히, .parent 요소의 높이는 브라우저의 100%입니다. 8px (위쪽 + 아래쪽) 여백 외에도 여분의 공간이 있습니다.

100% + 16px! = 100%. 두 번째 예에서

* { 
    margin: 0;  
    padding: 0; 
}

의 사용은 ..effectively이 기본 마진을 제거합니다.

당신

은 단지 같은 결과 ..for

body { 
    margin: 0; 
}

를 사용할 수 있습니다.

출처

2014-12-29 00:01:13

두 개의 스크롤바가 발생하는 이유는 무엇입니까?

답변

관련 문제