아래 예제를 고려할 때 궁금해서 #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>
답변
html
및 body
(각각 고유 한 색상을 부여) 의 배경을body
칠하면와 함께 아래로 이동 #container
되고 #container
자체가 상단에서 전혀 오프셋되지 않는 것을 금방 알 수 body
있습니다. 이것은 여백 붕괴 의 부작용으로 여기 에서 자세히 다룹니다 (이 답변은 약간 다른 설정을 설명하지만).
이 동작으로 인해 스크롤 막대가 .NET body
의 높이를 100 %로 선언했기 때문에 나타납니다 html
. body
여백은 높이 계산에 포함되지 않으므로 의 실제 높이는 영향을받지 않습니다.
답변
조금 늦었지만 누군가에게 도움이 될 수도 있습니다.
추가 하면 W3C가 말한 것처럼 스크롤 막대 float: left;
가 #container
제거됩니다.
• 플로팅 된 상자와 다른 상자 사이의 여백은 접히지 않습니다 (플로트와 그 유입 자식 사이에서도).
답변
@ BoltClock ♦의 대답에 근거하여, 나는 … 마진을 제로화하여 고정
그래서
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
id “st-full-pg”가 패널 div (패널 제목과 패널 본문을 더 포함 함)에 할당 된 곳에서 작동합니다.
답변
추가하는 float:left;
것은 좋지만 중앙 수평 위치를 방해합니다.margin:auto;
마진이 얼마나 큰지 안다면 calc를 사용하여 신장 비율로 설명 할 수 있습니다.
height: calc(100% - 50px);
브라우저 지원은 좋지만 IE11 +
https://caniuse.com/#feat=calc
답변
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
이것은 나를 위해 일했습니다.
답변
해결책을 찾았습니다 : add padding : 1px 0; to body는 수직 스크롤바가 나타나지 않도록합니다.
답변
html, body {
height: 100%;
overflow: hidden;
}
본문 스크롤을 제거하려면 다음 스타일을 추가하십시오.
body {
height: 100%;
overflow: hidden;
}