div가 남은 화면 공간의 높이를 채우도록 만듭니다.
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
콘텐츠가 전체 화면 높이를 채우도록 하는 웹 애플리케이션을 개발 중입니다.
페이지에는 로고와 계정 정보가 포함된 헤더가 있습니다.이는 임의의 높이일 수 있습니다.콘텐츠 div가 페이지의 나머지 부분을 맨 아래까지 채우길 원합니다.
헤더가 있어요 div 그리고 내용 div.현재 나는 다음과 같은 레이아웃에 테이블을 사용하고 있습니다.
CSS와 HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>페이지의 전체 높이가 채워지며 스크롤이 필요하지 않습니다.
콘텐츠 div 내부의 모든 항목에 대해 설정 top: 0; 헤더 바로 아래에 넣겠습니다.때로는 콘텐츠가 높이가 100%로 설정된 실제 테이블일 수도 있습니다.퍼팅 header 내부에 content 이것이 작동하도록 허용하지 않습니다.
사용하지 않고도 같은 효과를 얻을 수 있는 방법이 있나요? table?
업데이트:
콘텐츠 내부의 요소 div 높이도 백분율로 설정됩니다.그래서 내부적으로 100% 뭔가가 div 밑바닥까지 채워줄게.50%에서는 두 요소도 마찬가지입니다.
업데이트 2:
예를 들어 헤더가 화면 높이의 20%를 차지하는 경우 테이블 내부에 50%로 지정됩니다. #content 화면 공간의 40%를 차지합니다.지금까지는 전체 항목을 테이블로 래핑하는 것이 작동하는 유일한 방법입니다.
해결책
2015년 업데이트:플렉스박스 접근 방식
간단히 언급하는 두 가지 다른 답변이 있습니다 플렉스박스;그러나 그것은 2년 이상 전의 일이며 어떤 예도 제공하지 않습니다.Flexbox의 사양은 이제 확실히 확정되었습니다.
메모:CSS 유연한 상자 레이아웃 사양은 후보 권장 단계에 있지만 모든 브라우저에서 이를 구현한 것은 아닙니다.WebKit 구현에는 -webkit- 접두사가 붙어야 합니다.Internet Explorer는 -ms- 접두사가 붙은 이전 버전의 사양을 구현합니다.Opera 12.10은 접두사가 없는 최신 버전의 사양을 구현합니다.최신 호환성 상태는 각 속성의 호환성 표를 참조하세요.
(에서 가져옴 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
모든 주요 브라우저와 IE11+는 Flexbox를 지원합니다.IE 10 이하의 경우 FlexieJS shim을 사용할 수 있습니다.
현재 지원을 확인하려면 여기를 참조하세요.http://caniuse.com/#feat=flexbox
실제 사례
Flexbox를 사용하면 고정 크기, 콘텐츠 크기 크기 또는 남은 공간 크기가 있는 행이나 열 사이를 쉽게 전환할 수 있습니다.내 예에서는 헤더가 내용에 맞춰지도록 설정했고(OPs 질문에 따라) 고정 높이 영역을 추가하는 방법을 보여주기 위해 바닥글을 추가한 다음 나머지 공간을 채우도록 콘텐츠 영역을 설정했습니다.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>위의 CSS에서는 몸을 풀다 재산은 약칭으로 유연하게 성장하다, 플렉스 수축, 그리고 플렉스 기반 플렉스 아이템의 유연성을 설정하는 속성입니다.모질라는 유연한 상자 모델에 대한 좋은 소개.
다른 팁
CSS에서 이를 수행할 수 있는 건전한 브라우저 간 방법은 실제로 없습니다.레이아웃이 복잡하다고 가정하면 JavaScript를 사용하여 요소의 높이를 설정해야 합니다.당신이 해야 할 일의 핵심은 다음과 같습니다.
Element Height = Viewport height - element.offset.top - desired bottom margin
이 값을 얻고 요소의 높이를 설정할 수 있으면 크기 조정 기능을 실행할 수 있도록 창 onload 및 onresize에 이벤트 핸들러를 연결해야 합니다.
또한 콘텐츠가 뷰포트보다 클 수 있다고 가정하면 스크롤하려면 Overflow-y를 설정해야 합니다.
원본 게시물은 3년 전의 게시물입니다.저처럼 이 게시물을 방문하는 많은 사람들이 앱과 같은 레이아웃 솔루션, 즉 고정된 머리글, 바닥글 및 나머지 화면을 차지하는 전체 높이 콘텐츠를 찾고 있는 것 같습니다.그렇다면 이 게시물이 도움이 될 수 있으며 IE7+ 등에서 작동합니다.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
다음은 해당 게시물의 일부 내용입니다.
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>마크업에 테이블을 사용하는 대신 CSS 테이블을 사용할 수 있습니다.
마크업
<body>
<div>hello </div>
<div>there</div>
</body>
(관련) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
이 방법의 몇 가지 장점은 다음과 같습니다.
1) 마크업 감소
2) 마크업은 표 형식의 데이터가 아니기 때문에 표보다 더 의미론적입니다.
3) 브라우저 지원은 매우 좋은:IE8+, 모든 최신 브라우저 및 모바일 장치(사용해도 되나요)
완전성을 위해 다음은 CSS 속성에 해당하는 Html 요소입니다. CSS 테이블 모델
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
CSS 전용 접근 방식(높이가 알려진/고정된 경우)
중간 요소가 전체 페이지에 수직으로 걸쳐 있도록 하려면 다음을 사용할 수 있습니다. calc() 이는 CSS3에 도입되었습니다.
우리가 가지고 있다고 가정하면 고정 높이 header 그리고 footer 요소를 사용하고 우리는 section 사용 가능한 전체 수직 높이를 가져오는 태그...
가정된 마크업
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
따라서 CSS는 다음과 같아야 합니다.
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
그래서 여기서 하는 일은 요소의 높이를 더하고 요소의 높이를 빼는 것입니다. 100% 사용하여 calc() 기능.
꼭 사용해보세요 height: 100%; 상위 요소의 경우.
사용된:height: calc(100vh - 110px);
암호:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>그냥 사용하는 건 어때요? vh 이는 다음을 의미합니다. view height ~에 CSS...
를보세요 코드 조각 나는 당신을 위해 아래를 만들고 실행했습니다.
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>또한 제가 여러분을 위해 만든 아래 이미지를 살펴보세요.
CSS3 간단한 방법
height: calc(100% - 10px); // 10px is height of your first div...
요즘의 모든 주요 브라우저는 이를 지원하므로 빈티지 브라우저를 지원할 필요가 없다면 계속 진행하세요.
순전히 다음과 같이 할 수 있습니다. CSS 사용하여 vh:
#page
{
display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent
{
float:left; width:100%; display:block;
}
#content
{
float:left; width:100%; height:100%; display:block; overflow:scroll;
}
그리고 HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
확인해 보니 모든 주요 브라우저에서 작동합니다. Chrome, IE, 그리고 FireFox
Flexbox를 사용하는 간단한 솔루션:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>콘텐츠가 너무 길 때 스크롤하려면 하단 div가 필요할 때 게시된 솔루션 중 어느 것도 작동하지 않습니다.이 경우 작동하는 솔루션은 다음과 같습니다.
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
저도 이것에 대한 답을 찾아보았습니다.IE8 이상을 대상으로 할 수 있을 만큼 운이 좋다면 다음을 사용할 수 있습니다. display:table div를 포함한 블록 수준 요소가 있는 테이블의 렌더링 규칙을 얻기 위한 관련 값입니다.
운이 더 좋고 사용자가 최상위 브라우저를 사용하는 경우(예를 들어 내 최신 프로젝트처럼 귀하가 제어하는 컴퓨터의 인트라넷 앱인 경우) 새 브라우저를 사용할 수 있습니다. 유연한 박스 레이아웃 CSS3에서!
나에게 도움이 된 것은 (다른 div 내의 div와 다른 모든 상황에서 가정) 하단 패딩을 100%로 설정하는 것입니다.즉, CSS/스타일시트에 다음을 추가하세요.
padding-bottom: 100%;
부인 성명:허용된 답변은 솔루션에 대한 아이디어를 제공하지만 불필요한 래퍼와 CSS 규칙으로 인해 약간 부풀어 오른 것으로 나타났습니다.다음은 CSS 규칙이 거의 없는 솔루션입니다.
HTML5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
위의 솔루션 사용 뷰포트 단위 그리고 플렉스박스, 이며 따라서 IE10+입니다. 단, IE10의 이전 구문을 사용하면 됩니다.
함께 사용할 수 있는 Codepen: 코드펜 링크
또는 콘텐츠가 넘칠 경우 스크롤할 수 있도록 기본 컨테이너가 필요한 사람들을 위한 것입니다. 코드펜 링크
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
모든 정상 브라우저에서는 형제로서 콘텐츠 앞에 "헤더" div를 넣을 수 있으며 동일한 CSS가 작동합니다.그러나 IE7-은 이 경우 부동 소수점이 100%인 경우 높이를 올바르게 해석하지 않으므로 위와 같이 헤더가 콘텐츠 내부에 있어야 합니다.오버플로:auto는 IE에서 이중 스크롤 막대를 발생시킵니다(항상 뷰포트 스크롤 막대가 표시되지만 비활성화됨). 자동이 없으면 콘텐츠가 오버플로되면 잘립니다.
지금은 수많은 답변이 있지만 다음을 사용하여 찾았습니다. height: 100vh; 사용 가능한 전체 수직 공간을 채워야 하는 div 요소에 대한 작업을 수행합니다.
이렇게 하면 디스플레이나 위치 지정을 가지고 장난칠 필요가 없습니다.이는 부트스트랩을 사용하여 사이드바와 메인이 있는 대시보드를 만들 때 유용했습니다.배경색을 적용할 수 있도록 메인이 수직 공간 전체를 늘려서 채우길 원했습니다.
div {
height: 100vh;
}
IE9 이상 지원: 링크를 보려면 클릭하세요
이전 브라우저(즉, MSIE 9 이하)를 지원하지 않는 경우 다음을 사용하여 이를 수행할 수 있습니다. 유연한 박스 레이아웃 모듈 이는 이미 W3C CR입니다.이 모듈은 콘텐츠 재정렬과 같은 다른 멋진 트릭도 허용합니다.
불행하게도 MSIE 9 이하에서는 이를 지원하지 않으며 Firefox 이외의 모든 브라우저에서는 CSS 속성에 공급업체 접두사를 사용해야 합니다.다른 공급업체도 곧 접두사를 삭제하기를 바랍니다.
또 다른 선택은 CSS 그리드 레이아웃 하지만 안정적인 버전의 브라우저에서는 지원이 훨씬 적습니다.실제로 MSIE 10만이 이를 지원합니다.
나는 이것과 한동안 씨름했고 결국 다음과 같은 결과를 얻었습니다.
콘텐츠 DIV를 부모와 같은 높이로 만드는 것은 쉽지만 부모 높이에서 헤더 높이를 뺀 값으로 만드는 것은 분명히 어렵기 때문에 콘텐츠 div를 전체 높이로 만들기로 결정했지만 절대적으로 왼쪽 상단에 배치한 다음 패딩을 정의했습니다. 헤더의 높이를 갖는 상단의 경우.이렇게 하면 콘텐츠가 헤더 아래에 깔끔하게 표시되고 나머지 공간 전체를 채웁니다.
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
왜 이렇게 하면 안 되나요?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
HTML과 본문(순서대로)에 높이를 부여한 다음 요소에 높이를 부여하시겠습니까?
나에게 효과적
style="height:100vh"
나를 위해 문제를 해결했습니다.내 경우에는 이것을 필수 div에 적용했습니다.
정의하는 것만으로도 body ~와 함께 display:grid 그리고 grid-template-rows 사용하여 auto 그리고 fr 가치 재산.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>실제로 사용할 수 있습니다 display: table 영역을 두 요소(헤더와 콘텐츠)로 분할합니다. 헤더의 높이가 다양하고 콘텐츠가 나머지 공간을 채웁니다.이는 전체 페이지에서 작동할 뿐만 아니라 해당 영역이 단순히 다음과 같이 배치된 다른 요소의 콘텐츠인 경우에도 작동합니다. position 로 설정 relative, absolute 또는 fixed.상위 요소의 높이가 0이 아닌 한 작동합니다.
이 바이올린을 참조하십시오 그리고 아래 코드도 마찬가지입니다:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
Vincent, 귀하의 새로운 요구 사항을 사용하여 다시 답변하겠습니다.내용이 너무 길면 숨겨지는 것에 신경쓰지 않기 때문에 헤더를 플로팅할 필요가 없습니다.html 및 body 태그에 오버플로를 숨기고 설정하면 됩니다. #content 높이를 100%로 설정합니다.콘텐츠는 항상 헤더 높이만큼 뷰포트보다 길지만 숨겨지고 스크롤 막대가 발생하지 않습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
이 시도
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
나는 매우 간단한 해결책을 찾았습니다. 왜냐하면 나에게는 그것이 단지 디자인 문제였기 때문입니다.나는 페이지의 나머지 부분이 빨간색 바닥글 아래에 흰색이 되지 않기를 원했습니다.그래서 페이지 배경색을 빨간색으로 설정했습니다.그리고 내용의 배경색을 흰색으로 변경합니다.콘텐츠 높이를 다음과 같이 설정합니다.20em 또는 50%에서는 거의 비어 있는 페이지가 전체 페이지를 빨간색으로 남기지 않습니다.
모바일 앱의 경우 VH와 VW만 사용합니다.
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
나는 같은 문제가 있었지만 위의 flexbox를 사용하여 솔루션을 만들 수 없었습니다.그래서 저는 다음을 포함하는 자체 템플릿을 만들었습니다.
- 고정된 크기 요소가 있는 헤더
- 바닥글
- 나머지 높이를 차지하는 스크롤바가 있는 사이드바
- 콘텐츠
Flexbox를 사용했지만 더 간단한 방법으로 속성만 사용했습니다. 표시하다:몸을 풀다 그리고 플렉스 방향:행|열:
저는 Angle을 사용하고 있으며 구성 요소 크기가 상위 요소의 100%가 되기를 원합니다.
핵심은 크기를 제한하기 위해 모든 부모의 크기(백분율)를 설정하는 것입니다.다음 예에서는 myapp 높이가 뷰포트의 100%를 갖습니다.
머리글과 바닥글이 5%를 가지므로 주 구성 요소는 뷰포트의 90%를 차지합니다.
여기에 내 템플릿을 게시했습니다. https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
Mr.의 아이디어를 파생시켰습니다.외계인...
이는 CSS3 지원 브라우저에 널리 사용되는 Flex Box 솔루션보다 더 깔끔한 솔루션인 것 같습니다.
콘텐츠 블록에 calc()와 함께 min-height(높이 대신)를 사용하면 됩니다.
calc()는 100%로 시작하여 머리글과 바닥글의 높이를 뺍니다(패딩 값을 포함해야 함).
"높이" 대신 "최소 높이"를 사용하는 것은 자바스크립트로 렌더링된 콘텐츠 및 Angular2와 같은 JS 프레임워크에서 작동할 수 있으므로 특히 유용합니다.그렇지 않으면 자바스크립트로 렌더링된 콘텐츠가 표시되면 계산 시 바닥글이 페이지 하단으로 푸시되지 않습니다.
다음은 높이 50픽셀과 패딩 20픽셀을 모두 사용하는 머리글과 바닥글의 간단한 예입니다.
HTML:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
물론 수학은 단순화될 수 있지만 아이디어는 얻을 수 있습니다.
Javascript를 사용하면 더 나은 리마이닝 화면 공간을 동적으로 계산할 수 있습니다.
아래 lib와 같이 CSS-IN-JS 기술을 사용할 수 있습니다.
그것 JavaScript를 사용하는 것 외에는 다른 방식으로 나를 위해 일한 적이 없습니다. NICCAI가 첫 번째 답변에서 제안한 것처럼.나는 그 접근 방식을 사용하여 <div> Google 지도와 함께.
다음은 이를 수행하는 방법의 전체 예입니다(Safari/FireFox/IE/iPhone/Andorid에서 작동(회전과 함께 작동)).
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
