[html] 바디 높이를 브라우저 높이의 100 %로 설정

다양한 시나리오를 테스트 한 후 이것이 최선의 해결책이라고 생각합니다.

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

내용이 넘치면 html및 body요소가 자동으로 확장 된다는 점에서 동적입니다 . 최신 버전의 Firefox, Chrome 및 IE 11에서 테스트했습니다.

여기에서 전체 바이올린을보십시오 (테이블 싫어하는 사람들을 위해 항상 div를 사용하도록 변경할 수 있습니다).

https://jsfiddle.net/71yp4rh1/9/

그것을 말하면서 여기에 게시 된 답변에 몇 가지 문제가 있습니다 .

html, body {
    height: 100%;
}

위의 CSS를 사용하면 다음과 같이 내용이 오버플로되면 html과 body 요소가 자동으로 확장되지 않습니다.

https://jsfiddle.net/9vyy620m/4/

스크롤 할 때 반복되는 배경에 주목하십니까? 자식 테이블 오버플로로 인해 본문 요소의 높이가 증가하지 않았기 때문에 발생합니다. 다른 블록 요소처럼 확장되지 않는 이유는 무엇입니까? 잘 모르겠습니다. 브라우저가 이것을 잘못 처리한다고 생각합니다.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

위에 표시된대로 신체에 최소 높이를 100 %로 설정하면 다른 문제가 발생합니다. 이렇게하면 다음과 같이 자식 div 또는 테이블이 백분율 높이를 차지하도록 지정할 수 없습니다.

https://jsfiddle.net/aq74v2v7/4/

이것이 누군가를 돕기를 바랍니다. 브라우저가 이것을 잘못 처리하고 있다고 생각합니다. 아이들이 넘치면 몸의 높이가 자동으로 커짐에 따라 조정됩니다. 그러나 100 % 높이와 100 % 너비를 사용하면 발생하지 않는 것 같습니다.

답변

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}