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

84

아래 예제를 고려할 때 궁금해서 #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의 예

html css

— 네오디뮴
소스

참조 stackoverflow.com/questions/34357434/…

— Matt Browne

65

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

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

— BoltClock
소스

이것은 페이지의 요소 높이가 창, 본문, 본문 내부 / 또는 위쪽 요소 순으로 계산된다는 의미입니까? 모든 백분율이 px, pt 또는 em 값으로 변환됩니까?

— TMB

5

@TMB : 100 % 높이를 설정 html하면 뷰포트 (브라우저의보기 영역)의 100 %가되고, 높이가 100 % 설정 body되면 상위 항목 인 html. 뒤 따르는 백분율은 항상 요소의 조상의 백분율입니다. 당신이 100 % 높이를 설정하지 않은 경우 html또는 body그들은 다른 블록 요소처럼 동작합니다. 자세한 내용은 w3.org/TR/CSS21/syndata.html#percentage-units 를 참조하세요. 브라우저가 화면에서 사물을 측정하고 렌더링 할 크기를 정확히 알 수 있도록 % s 및 ems는 결국 렌더링 중에 일부 절대 값으로 변환되어야합니다.

— BoltClock

1

@neodymium : 맞습니다. 모두 html와 body다른 블록 레벨 요소 등이 잘 동작합니다.

— BoltClock

8

그렇다면 어떻게 수정해야합니까? Michel이 제안한대로 컨테이너 를 떠서 ?

— Dan Dascalescu 2015

1

@ 다니엘 알버스 챗 : 영광입니다!

— BoltClock

19

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

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

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

— 미셸
소스

18

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

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

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

— 거친
소스

3

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

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

height: calc(100% - 50px);

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

— ben.tiberius.avery
소스

왜 50px입니까? 매직 넘버.

— Ivan Rubinson

"마진이 얼마나 큰지 안다면." 나는 영업 이익이 50 픽셀로 언급되는 것입니다 생각

— 클레이

2

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

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

— fjkjava
소스

2

바닥 글이 있으면 제거합니다

— Alexander

1

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

— Vikash Pal
소스

0

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

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

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

— Lalit Bhakuni
소스

이것은 2 개의 수직 스크롤바가있는 문제를 해결했습니다. html을 갖도록 설정 overflow: hidden하고 본문을 그대로두면 수정되었습니다. 내 몸과 html 모두 height: 100%.

— Karai17

0

이 문제 body는 랩이라는 div 에 모든 내용을 넣기 전에 수정 되었습니다. Wrap의 스타일은로 설정되어야합니다 position: relative; min-height: 100%;. #containerdiv 50px를 상단과 왼쪽에서 배치하려면 패딩이 50px로 설정된 랩 안에 div를 넣으십시오. 여백은 방금 만든 랩 및 div에서는 작동하지 않지만 #container내부 및 그 안의 모든 것이 작동 합니다.

여기 jsfiddle에 대한 수정 사항이 있습니다 .

— TheZacher5645
소스

0

@BoltClock에서 영감을 받아 이것을 시도해 보았고 축소 및 축소 할 때도 작동했습니다.

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

body20px 아래로 이동 한 것 같습니다 .

— 에반 후
소스

0

/*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;
}

— Walex996
소스

0

코드 샘플이 포함 된 이해하기 쉬운 답변을 위해 여기에 오는 사람들을 위해이 답변 ( 여기 에서 복사 )이 적합합니다.

아니 자바 스크립트 또는 (예 : 명확한 픽셀 값 100px), 그냥 순수 CSS 및 백분율을해야합니다.

div가 그 자리에 혼자 앉아 있다면 height: 50%신체 높이의 50 %를 의미합니다. 일반적으로 몸의 높이는 눈에 보이는 내용없이 0이므로 50 %는 0입니다.

이것이 해결책입니다 ( this를 기반으로 함 ) ( background패딩 시각화를 얻으려면 줄의 주석 처리를 제거하십시오 ) :

/* 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>

스 니펫 확장

위의 내용은 여전히 일반적인 패딩이 있도록 작성되었습니다. 당신은 빨간색의 크기를 설정할 수 div에 100%여전히 각면 / 끝 부분에 패딩을 참조하십시오. 이 패딩을 원하지 않는 경우 다음을 사용하십시오 (좋아 보이지는 않지만 첫 번째 예제를 사용하는 것이 좋습니다).

/* 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>

스 니펫 확장

— 형광 녹색 5
소스

-2

overflow: hidden;HTML 및 본문에 추가하십시오 .

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

— NexusRex
소스

42

이 솔루션은 스크롤바를 완전히 제거합니다. 스크롤이 필요한 페이지에서도

— Vil

1

첫 번째 라인, 오버 플로우의 오타 : hidded

— 팀 그랜트

-9

빠른 해결책을 찾았습니다. 높이를 100 % 대신 99.99 %로 설정해보세요.

— user1254226
소스

사용자 창당 임의의 높이 차이와 내부 반올림 방법이 브라우저에 따라 달라지는 등 이것이 끔찍한 아이디어 인 이유는 여러 가지가 있습니다.

— Terra Ashley