[html] 바디 높이를 브라우저 높이의 100 %로 설정
본문에 브라우저 높이가 100 %가되도록하고 싶습니다. CSS를 사용하여 그렇게 할 수 있습니까?
설정을 시도했지만 height: 100%
작동하지 않습니다.
전체 브라우저 창을 채우도록 페이지의 배경색을 설정하고 싶지만 페이지에 내용이 거의 없으면 아래쪽에 못생긴 흰색 막대가 나타납니다.
답변
html 요소의 높이를 100 %로 설정하십시오.
html,
body {
height: 100%;
}
Body는 동적 속성의 크기를 조정하는 방법에 대해 부모 (HTML)를 확인하므로 HTML 요소의 높이도 설정해야합니다.
그러나 본문 내용은 동적으로 변경해야 할 것입니다. 최소 높이를 100 %로 설정하면이 목표를 달성 할 수 있습니다.
html {
height: 100%;
}
body {
min-height: 100%;
}
답변
html
및 body
요소 높이를 모두로 설정하는 대신 100%
뷰포트 백분율 길이를 사용할 수도 있습니다.
5.1.2. 뷰포트 백분율 길이 : ‘vw’, ‘vh’, ‘vmin’, ‘vmax’단위
뷰포트 백분율 길이는 초기 포함 블록의 크기를 기준으로합니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.
이 경우 100vh
뷰포트의 높이 인 값을 사용할 수 있습니다 .
body {
height: 100vh;
padding: 0;
}
body {
min-height: 100vh;
padding: 0;
}
이것은 대부분의 최신 브라우저에서 지원되며 여기에서 지원을 찾을 수 있습니다 .
답변
배경 이미지가있는 경우이를 대신 설정해야합니다.
html{
height: 100%;
}
body {
min-height: 100%;
}
이렇게하면 내용이 뷰포트보다 클 때 본문 태그가 계속 커지도록하고 스크롤을 시작할 때 배경 이미지가 계속 반복 / 스크롤 / 이동할 수 있습니다.
당신이 IE6를 지원해야 할 경우에 쐐기하는 방법을 찾아야합니다 기억 height:100%
몸을, IE6의 취급이 height
좋아 min-height
어쨌든.
답변
본문에 여백을 유지하고 스크롤 막대를 원하지 않는 경우 다음 CSS를 사용하십시오.
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
설정 body {min-height:100%}
하면 스크롤 막대가 나타납니다.
http://jsbin.com/aCaDahEK/2/edit?html,output 데모를 참조하십시오 .
답변
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
답변
다양한 시나리오를 테스트 한 후 이것이 최선의 해결책이라고 생각합니다.
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 % 너비를 사용하면 발생하지 않는 것 같습니다.
답변
문자 그대로 모든 CSS 파일을 시작할 때 사용하는 것은 다음과 같습니다.
html, body{
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
여백이 0이면 HTML 및 BODY 요소가 왼쪽 또는 오른쪽에 약간의 공간을 갖도록 브라우저에 의해 자동 배치되지 않습니다.
0으로 채워지면 HTML 및 BODY 요소가 브라우저 기본값으로 인해 요소 내부의 모든 것을 자동으로 아래로 또는 아래로 밀지 않도록합니다.
너비와 높이 변형은 100 %로 설정되어있어 실제로 자동 설정 여백 또는 패딩이있을 것으로 예상하여 브라우저가 크기를 조정하지 않도록합니다. 아마 필요하지 않을 것입니다.
이 솔루션은 또한 몇 년 전에 HTML과 CSS를 처음 시작했을 때와 마찬가지로 브라우저 창의 모서리에 처음 <div>
으로 margin:-8px;
맞출 필요가 없다는 것을 의미합니다 .
게시하기 전에 다른 전체 화면 CSS 프로젝트를 살펴본 결과 내가 사용했던 모든 body{margin:0;}
작업이 2 년 동안 제대로 진행된 것 외에는 아무것도 없다는 것을 알았습니다.
이 자세한 답변이 도움이 되길 바랍니다. 내 눈에 브라우저가 body / html 요소의 왼쪽과 때로는 위쪽에 보이지 않는 경계를 설정해야한다는 것은 바보입니다.