세로 스크롤바를 표시하는 본문 높이 100 %
아래 예제를 고려할 때 궁금해서 #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 (패널 제목과 패널 본문을 더 포함 함)에 할당 된 곳에서 작동합니다.
overflow: hidden;HTML 및 본문에 추가하십시오 .
html, body {
height: 100%;
overflow: hidden;
}
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
이것은 나를 위해 일했습니다.
추가하는 float:left;것은 좋지만 중앙 수평 위치를 방해합니다.margin:auto;
마진이 얼마나 큰지 안다면 calc를 사용하여 신장 비율로 설명 할 수 있습니다.
height: calc(100% - 50px);
브라우저 지원은 좋지만 IE11 + https://caniuse.com/#feat=calc
해결책을 찾았습니다 : add padding : 1px 0; to body는 수직 스크롤바가 나타나지 않도록합니다.
@BoltClock에서 영감을 받아 이것을 시도해 보았고 축소 및 축소 할 때도 작동했습니다.
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
body20px 아래로 이동 한 것 같습니다 .
html, body {
height: 100%;
overflow: hidden;
}
본문 스크롤을 제거하려면 다음 스타일을 추가하십시오.
body {
height: 100%;
overflow: hidden;
}
이 문제 body는 랩이라는 div 에 모든 내용을 넣기 전에 수정 되었습니다. Wrap의 스타일은로 설정되어야합니다 position: relative; min-height: 100%;. #container상단과 왼쪽에서 div 50px 를 배치하려면 패딩이 50px로 설정된 랩 안에 div를 넣으십시오. 여백은 방금 만든 랩 및 div에서는 작동하지 않지만 #container내부 및 그 안의 모든 것이 작동 합니다.
/*removes default margin & padding*/
html, body{
padding: 0px !important;
margin: 0px !important;
}
/*sets body height to max; and allows scrollbar as page content grows*/
body{
min-height: 100vh;
}
코드 샘플을 포함하는 이해하기 쉬운 답변을 위해 여기에 오는 사람들을 위해이 답변 ( 여기 에서 복사 )이 당신을위한 것입니다.
아니 자바 스크립트 또는 (예 : 명확한 픽셀 값 100px), 그냥 순수 CSS 및 백분율을해야합니다.
If your div is just sitting there on its own, height: 50% will mean 50% the height of the body. Normally, the height of the body is zero without any visible content, so 50% of that is just, well, zero.
This is the solution (based on this) (uncomment the background lines to get a visualisation of the padding):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html
{
height: 100%;
/* background: green; */
}
body
{
/*
100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
This prevents an unnecessary vertical scrollbar from appearing.
*/
height: calc(100% - 1em);
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
width: 50%;
height: 50%;
background: red;
}<div></div>The above was written so that there would still be the usual padding. You could set the dimensions of the red div to 100% and still see padding on each side/end. If you don't want this padding, use this (although it doesn't look nice, I recommend you stick with the first example):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html, body
{
height: 100%;
}
/* You can uncomment it but you wouldn't be able to see it anyway. */
/*
html
{
background: green;
}
*/
body
{
margin: 0;
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
width: 50%;
height: 50%;
background: red;
}<div></div>I found a quick solution: try set height to 99.99% instead of 100%
참고URL : https://stackoverflow.com/questions/12989931/body-height-100-displaying-vertical-scrollbar
'developer tip' 카테고리의 다른 글
| 키보드 단축키로 코드 탐색 (0) | 2020.11.12 |
|---|---|
| 개체가 C #에서 삭제되었는지 확인하는 방법 (0) | 2020.11.12 |
| 유니 코드 지원을위한 Java 정규식? (0) | 2020.11.11 |
| Composer에서 종속성 업데이트가 그렇게 느린 이유는 무엇입니까? (0) | 2020.11.11 |
| Go를 사용하여 빈 구조체를 JSON으로 마샬링하지 않는 방법은 무엇입니까? (0) | 2020.11.11 |