[html] 세로 스크롤바를 표시하는 본문 높이 100 %

Question 1

아래 예제를 고려할 때 궁금해서 #container div에 여백이 있으면 브라우저에 세로 스크롤바가 나타나는 이유는 무엇입니까? 컨테이너의 높이는 100 %로 설정된 본체 높이보다 훨씬 작습니다.

#container를 제외한 모든 요소에 대해 패딩과 여백을 0으로 설정했습니다. #container div에서 의도적으로 절대 위치를 생략했습니다. 이 경우 브라우저는 신체의 높이를 어떻게 계산하고 여백이 그것에 어떤 영향을 미칩니 까?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

JSFiddle의 예

Question 2

html및 body(각각 고유 한 색상을 부여) 의 배경을body 칠하면와 함께 아래로 이동 #container되고 #container자체가 상단에서 전혀 오프셋되지 않는 것을 금방 알 수 body있습니다. 이것은 여백 붕괴 의 부작용으로 여기 에서 자세히 다룹니다 (이 답변은 약간 다른 설정을 설명하지만).

이 동작으로 인해 스크롤 막대가 .NET body의 높이를 100 %로 선언했기 때문에 나타납니다 html. body여백은 높이 계산에 포함되지 않으므로 의 실제 높이는 영향을받지 않습니다.

Question 3

조금 늦었지만 누군가에게 도움이 될 수도 있습니다.

추가 하면 W3C가 말한 것처럼 스크롤 막대 float: left;가 #container제거됩니다.

• 플로팅 된 상자와 다른 상자 사이의 여백은 접히지 않습니다 (플로트와 그 유입 자식 사이에서도).

Question 4

@ BoltClock ♦의 대답에 근거하여, 나는 … 마진을 제로화하여 고정

그래서

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

id “st-full-pg”가 패널 div (패널 제목과 패널 본문을 더 포함 함)에 할당 된 곳에서 작동합니다.

Question 5

추가하는 float:left;것은 좋지만 중앙 수평 위치를 방해합니다.margin:auto;

마진이 얼마나 큰지 안다면 calc를 사용하여 신장 비율로 설명 할 수 있습니다.

height: calc(100% - 50px);

브라우저 지원은 좋지만 IE11 +
https://caniuse.com/#feat=calc

Question 6

html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

이것은 나를 위해 일했습니다.

Question 7

해결책을 찾았습니다 : add padding : 1px 0; to body는 수직 스크롤바가 나타나지 않도록합니다.

Question 8

html, body {
    height: 100%;
    overflow: hidden;
}

본문 스크롤을 제거하려면 다음 스타일을 추가하십시오.

body {
    height: 100%;
    overflow: hidden;
}