답변:
이에 대한 트릭은 html 및 body 요소에 100 % 높이를 지정하는 것입니다. 일부 브라우저는 높이를 계산하기 위해 상위 요소 (html, body)를 찾습니다.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}모든 대답을 잊어 버리십시오.이 CSS 줄은 2 초 만에 저에게 효과적이었습니다.
height:100vh;1vh = 브라우저 화면 높이의 1 %
반응 형 레이아웃 크기 조정의 경우 다음을 사용할 수 있습니다.
min-height: 100vh[2018 년 11 월 업데이트] 댓글에서 언급했듯이 최소 높이를 사용하면 반응 형 디자인에 문제가 발생하지 않을 수 있습니다.
[2018 년 4 월 업데이트] 댓글에서 언급했듯이 질문이 제기 된 2011 년에 모든 브라우저가 뷰포트 단위를 지원하지는 않았습니다. 다른 답변은 당시 솔루션 vmax이었습니다. IE에서는 여전히 지원되지 않으므로 아직 모두에게 최상의 솔루션이 아닐 수도 있습니다.
min-height: 100vh가 훨씬 더 나을 것이라는 사소한 제안 . 반응 형 디자인에서도 확장 할 수 있습니다.
실제로 가장 좋은 방법은 다음과 같습니다.
html {
height:100%;
}
body {
min-height:100%;
}이것은 나를 위해 모든 것을 해결하고 바닥 글을 제어하는 데 도움이되며 페이지가 아래로 스크롤 되더라도 고정 바닥 글을 가질 수 있습니다.
기술 솔루션-편집 됨
역사적으로 '높이'는 가장 쉬운 '너비'에 비해 성형하기가 까다 롭습니다. CSS <body>는 스타일링이 작동하는 데 중점을 둡니다 . 위의 코드-우리가 준 <html>것과 <body>높이. 이것은 마술이 등장하는 곳입니다. 우리는 테이블에 '최소 높이' <body>가 <html>있기 때문에 브라우저 <body>에 최소 높이를 유지 하기 때문에 더 우월하다고 말하고 있습니다. 이것은 이미 높이가 이미 있기 때문에 <body>재정의를 허용 합니다 . 다시 말해, 우리는 브라우저를 속여서 테이블에서 "범핑" 하여 독립적으로 스타일을 지정할 수 있습니다.<html><html><html>
min-height그리고 height?
<body>는 스타일링이 작동하는 데 중점을 둡니다 . 이 코드는 우리가 준 <html>것과 <body>높이입니다. 이것은 마술이 등장하는 곳입니다. 우리는 테이블에 'min-height'를 가지고 있기 때문에 , 우리는 min-height를 보유하고 있기 때문에 더 <body>우월한 서버를 말하고 있습니다. 이것은 이미 높이가 이미 있기 때문에 재정의를 허용 합니다 . 즉, 우리는 서버를 속여서 테이블에서 "폭발"하도록하여 독립적으로 스타일을 지정할 수 있습니다. <html><body><body><html><html><html>
min-height 속성에 vh를 사용할 수 있습니다.
min-height: 100vh;여백을 사용하는 방법에 따라 다음과 같이 할 수 있습니다.
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside elementHTML5를 사용하면 다음을 수행 할 수 있습니다.
CSS :
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}HTML :
<header>blabablalba </header>
<section> Content </section>나를 위해 다음은 잘 작동했습니다.
헤더와 콘텐츠를 div에 래핑했습니다.
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>이 참조 를 사용하여 높이를 flexbox로 채웠습니다. CSS는 다음과 같습니다.
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}flexbox 기술에 대한 자세한 내용은 참조를 방문하십시오.
부모를로 설정할 수도 있습니다 display: inline. http://codepen.io/tommymarshall/pen/cECyH 참조
html과 body의 높이도 100 %로 설정해야합니다.
수락 된 답변이 작동하지 않습니다. 그리고 가장 많이 득표 한 답변은 실제 질문에 대한 답변이 아닙니다. 고정 픽셀 높이 헤더와 브라우저의 나머지 디스플레이에 필러를 사용하고 스크롤하여 owerflow를 찾습니다. 다음은 절대 위치 지정을 사용하여 실제로 작동하는 솔루션입니다. 나는 또한 질문에서 "고정 헤더"의 소리로 헤더의 높이를 알고 있다고 가정합니다. 여기에서는 150px를 예로 사용합니다.
HTML :
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>CSS :( 시각적 효과만을위한 배경색 추가)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}내부의 실제 콘텐츠와 함께 이것이 어떻게 작동하는지 더 자세히 보려면 부트 스트랩 행과 열을 사용 #Content하여이 jsfiddle을 살펴보십시오 .
bottom숙박 시설은 #Content페이지 끝 부분에 고정되어 있는지 확인했습니다 . 시간을내어 설명해 주셔서 감사합니다.
여기에 5 센트를 더하고 고전적인 솔루션을 제공하겠습니다.
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>이것은 모든 브라우저, 스크립트, 플렉스없이 작동합니다. 전체 페이지 모드에서 스 니펫을 열고 브라우저 크기 조정 : 전체 화면 모드에서도 원하는 비율이 유지됩니다.
idHeader.height및 idContent.top경계를 포함하도록 조정하고, 경계를 사용하지 않는 경우와 동일한 값을 가져야한다. 그렇지 않으면 계산 된 너비에 테두리, 여백 및 / 또는 패딩이 포함되지 않으므로 요소가 뷰포트에서 빠져 나옵니다.left:0; right:0;width:100%테두리를 사용하지 않으면 같은 이유로 대체 될 수 있습니다 .padding-top및 / 또는
padding-bottom속성을 추가해야합니다 #idOuter.내 대답을 완성하기 위해 다음은 바닥 글 레이아웃입니다.
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>다음은 머리글과 바닥 글이 모두있는 레이아웃입니다.
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>CSS PLaY | 크로스 브라우저 고정 머리글 / 바닥 글 / 중앙 단일 열 레이아웃
CSS 프레임, 버전 2 : 예제 2, 지정된 너비 | 456 Berea Street
한 가지 중요한 것은 이것이 쉬운 것처럼 들리지만 이와 같은 효과를 얻기 위해 CSS 파일에 들어가는 추악한 코드가 상당히 많이있을 것입니다. 불행히도 이것이 유일한 선택입니다.
지금까지 찾은 가장 좋은 해결책은 페이지 하단에 바닥 글 요소를 설정 한 다음 바닥 글 오프셋과 확장해야하는 요소의 차이를 평가하는 것입니다. 예 :
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');각 창 크기 조정에서 내용 요소의 높이를 업데이트하고 싶을 수도 있습니다.
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});