본문을 브라우저 높이의 100%로 만듭니다.
는 i다 i i i를 만들고 싶다body100%CSS c 、 CSS 、 CSS 、 CSS 。
★★★★★★★★★★★★★★★★를 설정해 보았다.height: 100%하지만 작동하지 않습니다.
브라우저 창 전체를 채우는 페이지의 배경색을 설정하고 싶은데, 페이지의 내용이 적으면 하단에 보기 흉한 흰색 막대가 나타납니다.
html 요소의 높이도 100%로 설정해 보십시오.
html,
body {
height: 100%;
}
Body는 부모(HTML)에게 동적 속성 축척 방법을 확인하므로 HTML 요소도 높이를 설정해야 합니다.
그러나 본문의 내용은 아마도 동적으로 변화해야 할 것이다.최소 높이를 100%로 설정하면 이 목표를 달성할 수 있습니다.
html {
height: 100%;
}
body {
min-height: 100%;
}
「」의 양쪽 모두를 설정하는 에, 「」를 합니다.html ★★★★★★★★★★★★★★★★★」body에서 까지의 높이100%lengths.viewport-percentage 를 사용할 .
5.1.2 뷰포트 비율 길이: 'vw', 'vh', 'vmin', 'vmax' 단위
viewport-percentage 길이는 처음 포함된 블록의 크기에 상대적입니다.초기 포함 블록의 높이 또는 폭이 변경되면 그에 따라 크기가 조정됩니다.
때는 이 할 수 .100vh - 뷰포트의 높이입니다.
body {
height: 100vh;
padding: 0;
}
body {
min-height: 100vh;
padding: 0;
}
이는 대부분의 최신 브라우저에서 지원됩니다. 지원 내용은 여기를 참조하십시오.
배경 이미지가 있는 경우는, 대신에 다음과 같이 설정할 수 있습니다.
html{
height: 100%;
}
body {
min-height: 100%;
}
이렇게 하면 콘텐츠가 뷰포트보다 클 때 바디 태그가 계속 커지고 아래로 스크롤을 시작할 때 배경 이미지가 반복/스크롤/무엇이든 계속됩니다.
를 가 있는 는, 에 를 박는 .height:100%은 IE6에서 취급합니다.heightmin-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 {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0;
padding: 0;
}
「」는 「동적」입니다.html 및body요소의 내용이 오버플로우하면 요소가 자동으로 확장됩니다.Firefox, Chrome, IE 11은 파이어폭스, 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
{
height: 100%;
margin: 0;
padding: 0;
}
최신 CSS를 통한 뛰어난 솔루션
html, body{
min-height: 100vh;
overflow: auto;
}
사용하는 모든 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> a margin:-8px;브라우저 창의 구석에 맞도록 설정합니다.
글을 올리기 전에 다른 풀스크린 CSS 프로젝트를 봤는데 거기서 사용한 건body{margin:0;}다른 건 아무것도 없어요 2년 동안 잘 작동했어요
이 상세한 답변이 도움이 되길 바라며, 당신의 고통을 느낍니다.브라우저가 본문/html 요소의 왼쪽이나 위쪽에 보이지 않는 경계를 설정하는 것은 바보 같은 일입니다.
최신 브라우저와 레거시브라우저 모두에서 기능하는 CSS 높이
여기에 게재되어 있는 다른 솔루션의 대부분은 레거시 브라우저에서는 정상적으로 동작하지 않습니다.그리고 사람들이 올린 코드 중 일부는 텍스트가 배경색을 지나치는 최신 브라우저에서는 100% 높이를 넘는 끔찍한 텍스트 오버플로우 현상을 일으킬 수 있는데, 이는 잘못된 디자인이다.그 대신 제 코드 솔루션을 사용해 보세요.
다음 CSS 코드는 과거 및 현재 알려진 모든 브라우저에서 유연한 웹 페이지 높이 설정을 올바르게 지원해야 합니다.
html {
height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */
height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */
}
body {
height: auto; /* Allows content to grow beyond the page without overflow */
width: auto; /* Allows content to grow beyond the page without overflow */
min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */
min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */
overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar. Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/
margin: 0;
padding: 0;
background:yellow;/* FOR TESTING: Next add a large block of text or content to your page and make sure this background color always fills the screen as your content scrolls off the page. If so, this works. You have 100% height with flexible content! */
}
상기 코드에 관한 주의사항
오래된뿐만 아니라 에서도 "에서 높이를 100%로 설정하지 .<html>셀렉터, 차체가 100% 높이를 달성하지 못합니다!그래서 이것은 매우 중요합니다.
유닛('은 있습니다.body및 selector가 selector로 되어 있는 한 하지 않습니다.html 중 하나를 합니다.100% ★★★★★★★★★★★★★★★★★」100vh ★★★★★★★★★★★★★★★★★★★★★.body 그 값을 항 the the the the the the the the the the the the the the에서 도출한다.html is.이 는 과거 중 몇 가지 오래된 본문에 대한 을 설정하는 것이 좋습니다.
「 」를 하고 있는 body선택기에서는 뷰포트 높이를 직접 상속하는 방법을 알 수 없습니다. 역시 항상 '다음에', '다음에', '다음에', '다음에', '다음에', '다음에'를해 주세요.html★★★★★★★★★★★★★★★★★★★★★★★! 'vh' ' 수 있습니다.bodyhtml. 부모 루트인 입니다.html에 '''가 있습니다.100% 즉 '높이', '높이'body는 항상 올바르게 상속됩니다.
」로 설정되어 것에 .body로로 합니다.height:auto 아니라, 이에요.height:100%★★★★★★★★★★★★★★★★★★★★★★★★body컨텐츠의 성장에 맞추어 확장할 수 있도록, 처음에 컨텐츠의 주위에 요소를 설정합니다.스크롤 가능한 치수가 아닌 본체의 현재 시각적 치수로 콘텐츠를 제한하기 때문에 및 로 설정하거나height 특정 값을 설정하지 않을 수 있습니다.본문을 할당할 때마다height:100%컨텐츠 텍스트가 브라우저의 높이를 넘어서는 즉시 컨테이너와 원래 뷰포트 높이에 할당된 배경이 오버플로우되어 보기 흉한 비주얼이 생성됩니다.height:auto CSS에서 가장 친한 친구잖아!
그래도 시신은 100% 높이로 기본 설정하길 원하죠?min-height:100%훌륭하게 기능합니다!바디 요소의 높이를 100%로 기본 설정할 수 있을 뿐만 아니라 가장 오래된 브라우저에서도 사용할 수 있습니다.그러나 무엇보다 high:auto 콘텐츠의 수직 확장에 따라 배경을 100% 채우고 더 아래로 확장할 수 있습니다.
「」를 사용합니다.overflow:auto 경우 속성을 .height:auto body뷰포트 페이지 표시보다 콘텐츠의 길이가 길어질 경우 뷰포트의 높이를 넘어서는 등 필요한 모든 차원으로 콘텐츠를 확장하도록 페이지에 지시합니다.이다.body치수를 지정합니다.또한 필요에 따라 스크롤할 수 있습니다. overflow-y:scroll를 사용하면 기본적으로 모든 웹 브라우저에서 페이지 콘텐츠 오른쪽에 빈 스크롤바를 추가할 수 있습니다.내용이 뷰포트의 100% 높이를 초과하는 경우에만 스크롤 막대가 스크롤 막대 영역 안에 나타납니다.이것에 의해, 페이지 폭이나 여백이나 패딩이 브라우저에 의해서 사전에 계산되어 유저가 스크롤 하는 페이지와 스크롤 하지 않는 페이지를 표시하기 때문에, 페이지가 이동하는 것을 막을 수 있습니다.모든 시나리오에서 페이지 폭을 완벽하게 설정하고 웹 페이지가 빠르게 이동하거나 로드되지 않기 때문에 이 방법을 자주 사용합니다.
는 어요를 믿는다.height:auto입니다.body대부분의 UA 브라우저 스타일시트에 포함되어 있습니다.대부분의 브라우저는 기본적으로 이 값을 사용합니다.
" " " min-height:100% 기본 합니다.body본문에서 내용을 분리하지 않고 페이지 치수가 뷰포트를 채울 수 있도록 합니다.이것은, 다음의 이유만으로 동작합니다.html뷰포트를 기반으로 100% 높이를 도출했습니다.
서 두 .% ★★★★★★★★★★★★★★★★★」vh즉근원소,근원소,근원소,근원소,근원소,근원소,근원소,하세요.html100%로 하다에 '아,아,아,아,아,아,아'가 있는 것이 합니다.min-height:100% ★★★★★★★★★★★★★★★★★」min-height:100vh이치노그 이상은 필요 없습니다.
레거시 브라우저의 스타일링 높이
"" 에 했습니다.height ★★★★★★★★★★★★★★★★★」min-height2010년 이전의 브라우저에서는 "vh" 뷰포트 유닛을 지원하지 않는 경우가 많기 때문입니다.웹 세상의 모든 사람들이 최신의 가장 좋은 것을 사용하는 척 하는 것은 재미있지만, 현실은 아직도 많은 레거시 브라우저가 대기업 네트워크에 존재하고 있고 많은 사람들이 여전히 이러한 새로운 유닛을 이해하지 못하는 구식 브라우저를 사용하고 있다는 것이다.우리가 잊고 있는 것 중 하나는 많은 오래된 브라우저가 뷰포트 높이를 올바르게 채우는 방법을 모른다는 것입니다. 이러한 """"""""""""""""""""""""""""를 탑재해야 했습니다""height:100%html 및 「」body기본적으로 둘 다 접힌 높이입니다.그렇게 하지 않으면 뷰포트를 채우지 않은 콘텐츠 아래에 브라우저 배경색 및 기타 이상한 이미지가 흐를 수 있습니다.위의 예에서는 이 모든 문제를 해결하고 새로운 브라우저에서 계속 작동합니다.
HTML5 2010년) 에는 HTML5를 (2010년 이후)로 설정하는 했습니다.height:100%html ★★★★★★★★★★★★★★★★★」body또는 """ " " " " " " " " " " " 。min-height:100% body두 솔루션 모두 위의 코드를 과거 몇 년 동안 만든 것이 아니라 20년 이상의 레거시 웹 브라우저에서 사용할 수 있도록 합니다. Netscape 4 또는 에서는, 「Netscape 4」를 합니다.min-height:100%height:100%본문 셀렉터의 경우 매우 오래된 브라우저에서 높이가 축소되어 텍스트가 배경색으로 넘쳐날 수 있습니다.하지만 이 솔루션에서 볼 수 있는 문제는 이것뿐입니다.
제 CSS 솔루션을 사용하면 과거 및 현재 브라우저의 99.99%에서 웹 사이트를 올바르게 표시할 수 있습니다.이것에 의해, 과거 몇년간 제조된 브라우저의 60~80%에 머무르지 않게 되었습니다.
행운을 빕니다.
여기:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
필요한 경우 JS를 사용할 수도 있습니다.
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
이걸 쓰겠습니다.
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}<html>
<body>
</body>
</html>는 「」를 사용합니다.min-height: 100vh가 조금 에는 '오래된 브라우저'를 합니다.min-height: 100%예비군이 될 거야
overflow: auto화면 크기를 조정할 때(예를 들어 모바일 크기로) 본문과 html의 높이를 확장할 때 필요합니다.
해라
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
확인 부탁드립니다.
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}
또는 Viewport 높이:
html, body { width: 100vw; height: 100vh;}
뷰포트:뷰포트를 사용하는 것이 어떤 크기의 화면이라도 화면의 풀 하이트로 표시됩니다.
자신의 CSS 파일을 편집하고 높이 규칙을 스스로 정의하는 작업을 원하지 않는 경우 가장 일반적인 CSS 프레임워크도 여러 크기의 뷰포트를 사용하여 페이지 전체를 쉽게 채우는 본문 요소로 이 문제를 해결합니다.
예를 들어, CSS 프레임워크는 CSS 규칙 및 클래스를 정의할 필요가 없으며 CSS 파일을 HTML에 포함하기만 하면 되는 이 문제를 즉시 해결할 수 있습니다.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
html body {
min-height: 100%
}
모든 주요 브라우저(FF, Chrome, Opera, IE9+)에서 작동합니다.배경 이미지 및 그라데이션과 함께 작동합니다.스크롤 바는 콘텐츠 요구에 따라 사용할 수 있습니다.
진정한 순수주의자의 경우 브라우저의 기본 여백을 존중하여 콘텐츠가 커질수록 다른 방법으로 생성되는 원치 않는 스크롤을 방지합니다.Chrome, Safari 및 Firefox에서 테스트 완료.배경은 쇼용...
html {
display: flex;
flex-direction: column;
height: 100%;
background: red;
}
body {
flex:1;
background: green;
}CSS를 1라인만 사용하면 이 작업을 완료할 수 있습니다.
body{ height: 100vh; }
모든 답은 100% 정확하고 잘 설명되었지만, 나는 그것을 반응시키기 위해 좋고 매우 간단한 일을 했다.
여기서 요소는 100% 뷰 포트의 높이를 차지하지만, 모바일 뷰에서는 특히 세로 뷰(모바일)에서는 보기 좋지 않습니다.그래서 뷰 포트가 작아지면 요소가 서로 겹쳐집니다.그래서 여기에 코드가 있습니다.누군가 도움을 받기를 바랍니다.
<style>
.img_wrap{
width:100%;
background: #777;
}
.img_wrap img{
display: block;
width: 100px;
height: 100px;
padding: 50px 0px;
margin: 0 auto;
}
.img_wrap img:nth-child(2){
padding-top: 0;
}
</style>
<div class="img_wrap">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>
<script>
var windowHeight = $(window).height();
var elementHeight = $('.img_wrap').height();
if( elementHeight > windowHeight ){
$('.img_wrap').css({height:elementHeight});
}else{
$('.img_wrap').css({height:windowHeight});
}
</script>
JSfiddle 데모입니다.
나는 div 컨테이너를 스타일링합니다 - 보통 다음과 같은 css를 가진 신체의 유일한 아이
.body-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
}
20개 이상의 답변이 있었지만, 내가 발견한 가장 중요한 요소인 마크업을 언급한 사람은 아무도 없는 것 같다.
기본적으로 이 질문의 모든 답변과 몇 가지 다른 답변을 시도한 후 다음과 같이 마크업을 재구성했습니다.
<body>
<div class="section1">
<nav>
</nav>
...
</div>
<div class="section2">
</div>
</body>
기본적으로 두 개의 다른 외부 컨테이너가 필요합니다.첫 번째 용기는 탐색 막대를 포함하고 배경 색상/이미지를 브라우저 높이까지 확장하는 것을 목적으로 하며, 두 번째 용기는 두 번째 배경 색상/이미지를 포함하여 "폴드 아래" 모든 것을 포함합니다.
이 솔루션을 사용하면 첫 번째 용기의 배경을 바닥까지 확장하면서 두 번째 용기는 필요한 만큼의 공간을 차지하지 않습니다.
이 시점부터 I와 원래의 질문에서 모두 원하는 결과를 얻기 위해 필요한 유일한 CSS는 다음과 같습니다.
body {
height: 100%;
}
.section1 {
height: 100%;
background: black; /* for demo purposes */
}
.section2 {
background: white; /* for demo purposes */
}
여기서 갱신
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
현재 모든 최신 브라우저에서 지원되는 새로운 방법이 있습니다.사용방법:
.el {
height: -moz-available;
height: -webkit-fill-available;
height: stretch;
}
ASP.NET 어플리케이션만약 그렇다면, 당신의 마크업에는 거의 모든 것이 포장되어 있을 것입니다.폼 스타일링도 잊지 마세요." " " overflow:hidden;폼 하단의 여분의 공간을 제거할 수 있습니다.
CSS3에는 새로운 방식이 있습니다.
height:100vh
ViewPort는 높이와 100% 동일합니다.
그래서 당신의 코드는
body{
height:100vh;
}
언급URL : https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height
'programing' 카테고리의 다른 글
| Windows 탐색기 "명령 프롬프트 여기" (0) | 2023.04.09 |
|---|---|
| 목표 C 클래스 -> 문자열: [NSArray className] -> @"NSArray" (0) | 2023.04.09 |
| dispatch_async에 대해서 (0) | 2023.04.09 |
| 목록의 항목을 단일 문자열에 연결하는 방법 (0) | 2023.04.09 |
| Git - 메서드/함수의 변경 이력은 어떻게 표시합니까? (0) | 2023.04.09 |