나머지 화면 공간의 높이를 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 안에 것에 , 내용div 의항목대에설해정을 설정합니다.top: 0;머리글 바로 밑에 넣을 겁니다때때로 콘텐츠는 높이가 100%로 설정된 실제 테이블이 될 수 있습니다.을 넣는 중header東京의 content이 작업을 허용하지 않습니다.
사용하지 않고 동일한 효과를 얻을 수 있는 방법이 있습니까?table?
업데이트:
용내요의소부div높이도 백분율로 설정됩니다. 그서내부서의에무 안에 것.div는 50%에서두 할 것입니다.50%의 두 가지 요소도 마찬가지입니다.
업데이트 2:
를 들어,를 차지하는 , 내부 50 20%로입니다.#content화면 공간의 40%를 차지할 것입니다.지금까지, 전체를 테이블에 싸는 것만이 효과가 있습니다.
2015년 업데이트: Flexbox 접근 방식
Flexbox에 대해 간략하게 언급한 두 가지 다른 답변이 있습니다. 하지만 2년 이상 전의 일이며, 예를 들어 설명하지 않습니다.플렉스박스의 사양은 이제 확실히 확정되었습니다.
참고: CSS Flexible Box Layout 사양이 Candidate Recommendation 단계에 있지만 모든 브라우저가 이를 구현한 것은 아닙니다.WebKit 구현은 -webkit-로 접두사를 붙여야 합니다. Internet Explorer는 -ms-로 접두사를 붙인 이전 버전의 사양을 구현합니다. Opera 12.10은 고정되지 않은 최신 버전의 사양을 구현합니다.최신 호환성 상태는 각 속성의 호환성 표를 참조하십시오.
(https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes) 참조)
모든 주요 브라우저와 IE11+는 Flexbox를 지원합니다.IE 10 이상의 경우 Flexie를 사용할 수 있습니다.JS 심.
현재 지원을 확인하려면 http://caniuse.com/ #flex=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에서 flex 속성은 flex-grow, flex-shrink 및 flex-basis 속성을 짧게 처리하여 flex 항목의 유연성을 설정합니다.Mozilla는 유연한 상자 모델을 잘 소개했습니다.
CSS에서 이것을 할 수 있는 건전한 크로스 브라우저 방법은 없습니다.레이아웃에 복잡성이 있다고 가정하면 JavaScript를 사용하여 요소의 높이를 설정해야 합니다.여러분이 해야 할 일의 본질은 다음과 같습니다.
Element Height = Viewport height - element.offset.top - desired bottom margin
이 값을 가져오고 요소의 높이를 설정할 수 있으면 크기 조정 기능을 실행할 수 있도록 로드 시 및 크기 조정 시 창에 이벤트 핸들러를 모두 연결해야 합니다.
또한 콘텐츠가 뷰포트보다 클 수 있다고 가정하면 스크롤하려면 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%;
}
이 방법의 몇 가지 장점은 다음과 같습니다.
마크업 감소
마크업은 표 형식의 데이터가 아니기 때문에 표 형식보다 의미가 더 중요합니다.
브라우저 지원이 매우 좋습니다: IE8+, 모든 최신 브라우저 및 모바일 장치(카니유즈)
Just for completeness, here are the equivalent Html elements to css properties for the 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 전용 접근(높이를 알고 있거나 고정된 경우)
중간 요소가 전체 페이지에 수직으로 걸쳐지기를 원할 때, 당신은 CSS3에 소개된 것을 사용할 수 있습니다.
우리가 고정된 높이를 가지고 있다고 가정할 때 header그리고.footer요소들과 우리는 그것을 원합니다.section전체 사용 가능한 수직 높이를 가져오는 태그...
마크업을 가정하고 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;
}<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>그래서 여기서, 무엇을 하고 있는지는 요소의 높이를 더하고 그것에서 차감하는 것보다.100%용사를 calc()기능.
꼭 사용하시기 바랍니다.height: 100%;상위 요소의 경우.
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 컨텐츠 div 내에 div를 중심으로 하는 대체 솔루션
사용: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 heightCSS로...
아래에서 작성한 코드 조각을 보고 실행합니다.
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>또한 아래의 이미지를 참조하십시오.
콘텐츠가 너무 높을 때 스크롤할 하위 디비가 필요할 때 게시된 솔루션이 없습니다.이 경우 작동하는 솔루션은 다음과 같습니다.
.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;
}<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에서 오버플로를 처리하는 동안 컨테이너의 나머지 높이 채우기
CSS3 간단한 방법
height: calc(100% - 10px); // 10px is height of your first div...
요즘 모든 주요 브라우저가 이를 지원하므로 빈티지 브라우저를 지원할 필요가 없다면 계속하십시오.
고지 사항:수락된 답변은 해결책에 대한 아이디어를 제공하지만, 불필요한 포장지와 CSS 규칙으로 인해 다소 비대해지고 있습니다.아래는 CSS 규칙이 거의 없는 솔루션입니다.
HTML 5
<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+입니다.
또는 이것은 콘텐츠가 넘쳐날 경우 주 컨테이너를 스크롤할 수 있어야 하는 사람들을 위한 것입니다: 코드펜 링크
그것은 순수하게 할 수 있습니다.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
저도 이것에 대한 답을 찾고 있었습니다.으로 할 수 IE8을 할 수 .display:tablediv를 한 블록 입니다.
만약 당신이 훨씬 더 운이 좋고 당신의 사용자들이 최상위 브라우저를 사용하고 있다면(예를 들어, 이것이 내 최신 프로젝트처럼 당신이 제어하는 컴퓨터의 인트라넷 앱이라면), 당신은 CSS3의 새로운 플렉시블 박스 레이아웃을 사용할 수 있습니다!
부트스트랩에서:
CSS 스타일:
html, body {
height: 100%;
}
나머지 화면 공간의 높이만 채우면 됩니다.
<body class="d-flex flex-column">
<div class="d-flex flex-column flex-grow-1">
<header>Header</header>
<div>Content</div>
<footer class="mt-auto">Footer</footer>
</div>
</body>
나머지 화면 공간의 높이를 채우고 콘텐츠를 상위 요소의 중간에 정렬합니다.
<body class="d-flex flex-column">
<div class="d-flex flex-column flex-grow-1">
<header>Header</header>
<div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
<footer class="mt-auto">Footer</footer>
</div>
</body>
이전 브라우저(즉, MSIE 9 또는 이전 버전)를 지원하지 않는 문제를 해결할 수 있는 경우 이미 W3CCR인 Flexible Box Layout Module을 사용하여 이 작업을 수행할 수 있습니다.그 모듈은 콘텐츠 재주문과 같은 다른 멋진 속임수도 허용합니다.
안타깝게도 MSIE 9 이하에서는 이를 지원하지 않으므로 Firefox를 제외한 모든 브라우저에 대해 CSS 속성에 대해 벤더 접두사를 사용해야 합니다.다른 공급업체들도 곧 접두사를 삭제하기를 바랍니다.
또 다른 선택은 CSS 그리드 레이아웃이지만 안정적인 브라우저 버전의 지원은 훨씬 적습니다.실제로는 MSIE 10만 이 기능을 지원합니다.
2020년 업데이트: 모든 최신 브라우저가 두 가지를 모두 지원합니다.display: flex그리고.display: grid은 유일하누지다니원입에 대한 입니다.subgridFirefox에서만 지원됩니다.MSIE는 사양에서 어느 것도 지원하지 않지만 MSIE 특정 CSS 해킹을 추가할 의향이 있다면 동작하도록 만들 수 있습니다.저는 MSIE를 단순히 무시하는 것을 제안하고 싶습니다. MSIE조차도 더 이상 사용해서는 안 된다고 하기 때문입니다.Microsoft Edge는 이러한 기능을 잘 지원합니다(단, 에서는 Blink 렌더링 엔진을 Chrome과 공유하므로 하위 그리드 지원 제외).
를 한 예display: grid:
html, body
{
min-height: 100vh;
padding: 0;
margin: 0;
}
body
{
display: grid;
grid:
"myheader" auto
"mymain" minmax(0,1fr)
"myfooter" auto /
minmax(10rem, 90rem);
}
header
{
grid-area: myheader;
background: yellow;
}
main
{
grid-area: mymain;
background: pink;
align-self: center
/* or stretch
+ display: flex;
+ flex-direction: column;
+ justify-content: center; */
}
footer
{
grid-area: myfooter;
background: cyan;
}<header>Header content</header>
<main>Main content which should be centered and the content length may change.
<details><summary>Collapsible content</summary>
<p>Here's some text to cause more vertical space to be used.</p>
<p>Here's some text to cause more vertical space to be used (2).</p>
<p>Here's some text to cause more vertical space to be used (3).</p>
<p>Here's some text to cause more vertical space to be used (4).</p>
<p>Here's some text to cause more vertical space to be used (5).</p>
</details>
</main>
<footer>Footer content</footer>를 한 예display: flex:
html, body
{
min-height: 100vh;
padding: 0;
margin: 0;
}
body
{
display: flex;
}
main
{
background: pink;
align-self: center;
}<main>Main content which should be centered and the content length may change.
<details><summary>Collapsible content</summary>
<p>Here's some text to cause more vertical space to be used.</p>
<p>Here's some text to cause more vertical space to be used (2).</p>
<p>Here's some text to cause more vertical space to be used (3).</p>
<p>Here's some text to cause more vertical space to be used (4).</p>
<p>Here's some text to cause more vertical space to be used (5).</p>
</details>
</main>저에게 효과가 있었던 것은 (다른 div 내에 div가 있고 다른 모든 상황에서) 바닥 패딩을 100%로 설정하는 것입니다.즉, CSS/스타일시트에 추가합니다.
padding-bottom: 100%;
지금은 답이 많지만, 저는 다음과 같은 것을 발견했습니다.height: 100vh;사용 가능한 전체 수직 공간을 채워야 하는 div 요소를 작업합니다.
이렇게 하면 디스플레이나 위치 설정을 가지고 놀 필요가 없습니다.이것은 부트스트랩을 사용하여 사이드바와 메인이 있는 대시보드를 만들 때 유용했습니다.저는 메인이 전체 수직 공간을 확장하고 채우기를 원해서 배경색을 칠할 수 있게 했습니다.
div {
height: 100vh;
}
IE9 이상 지원: 링크를 보려면 클릭하십시오.
<!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에서 두 개의 스크롤 막대(항상 뷰포트 스크롤 막대가 표시되지만 비활성화됨)를 발생시키지만, 그렇지 않으면 콘텐츠가 오버플로되면 클립됩니다.
정의만 하면 됩니다.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>이것은 페블의 해결책에 대한 나만의 최소한의 버전입니다.IE11에서 작동하기 위한 트릭을 찾는 데 오랜 시간이 걸렸습니다(Chrome, Firefox, Edge 및 Safari에서도 테스트됨).
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
section {
display: flex;
flex-direction: column;
height: 100%;
}
div:first-child {
background: gold;
}
div:last-child {
background: plum;
flex-grow: 1;
}<body>
<section>
<div>FIT</div>
<div>GROW</div>
</section>
</body>저는 이것과 잠시 씨름하다가 결국 다음과 같은 결과를 얻었습니다.
콘텐츠 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에 적용했습니다.
는 실로사수있다니습할을 할 수 .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>
빈센트, 당신의 새로운 요구사항을 사용하여 다시 답변하겠습니다.너무 길면 내용이 숨겨지는 것에 대해 신경 쓰지 않으므로 머리글을 띄울 필요가 없습니다.태그에 html을 설정하면 .#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>
모바일 앱의 경우 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;
}
데모 - https://jsfiddle.net/u763ck92/
사용해 보세요.
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
저도 같은 문제가 있었지만 위의 플렉스 박스로 작업을 해결할 수 없었습니다.그래서 저는 다음과 같은 템플릿을 만들었습니다.
- 크기 요소가 고정된 머리글
- 바닥글
- 나머지 높이를 차지하는 스크롤 막대가 있는 사이드바
- 내용물
플렉스 박스를 사용했지만 속성 표시(플렉스 및 플렉스 방향: row|column)만 사용하여 보다 간단한 방법으로 사용했습니다.
저는 각도를 사용하기 때문에 구성 요소 크기가 상위 요소의 100%가 되기를 원합니다.
핵심은 모든 부모의 크기를 제한하기 위해 모든 부모의 크기(백분율)를 설정하는 것입니다.다음 예제에서 내 앱 높이는 뷰포트의 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>
에일리언 씨의 아이디어를...
이것은 CSS3 지원 브라우저용으로 널리 사용되는 플렉스 박스 솔루션보다 더 깨끗한 솔루션으로 보입니다.
내용 블록에 calc()와 함께 최소 높이(높이 대신)를 사용하기만 하면 됩니다.
계산()은 100%로 시작하여 머리글과 바닥글의 높이를 뺍니다(패딩 값을 포함해야 함).
"높이" 대신 "최소 높이"를 사용하는 것은 특히 유용하므로 Javascript 렌더링된 콘텐츠 및 Angular2와 같은 JS 프레임워크와 함께 작업할 수 있습니다.그렇지 않으면 Javascript 렌더링된 내용이 표시된 후에는 페이지 하단으로 바닥글이 푸시되지 않습니다.
다음은 높이 50px와 패딩 20px를 모두 사용하는 머리글과 바닥글의 간단한 예입니다.
HTML:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
물론, 수학은 단순화될 수 있지만, 당신은 이해할 수 있습니다...
저는 아주 간단한 해결책을 찾았습니다. 왜냐하면 저에게 그것은 단지 디자인의 문제였기 때문입니다.페이지의 나머지 부분이 빨간색 바닥글 아래에 흰색으로 표시되지 않도록 했습니다.그래서 저는 페이지 배경색을 빨간색으로 설정했습니다.그리고 내용물의 배경색은 흰색입니다.내용 높이를 예를 들어 20em 또는 50%로 설정하면 거의 비어 있는 페이지가 전체 페이지를 빨간색으로 만들지 않습니다.
언급URL : https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space
'it-source' 카테고리의 다른 글
| 집계하는 동안 MongoDB에 $second에 다른 if가 있습니까? (0) | 2023.05.06 |
|---|---|
| postgresql에서 배열 크기를 찾는 방법 (0) | 2023.05.06 |
| Xcode 5.1 - 컴파일할 아키텍처 없음(ONLY_ACTIVE_ARCH=YES, 활성 arch=x86_64, VALID_ARCS=i386) (0) | 2023.05.06 |
| 열 ASC로 정렬하지만 NULL 값이 먼저입니까? (0) | 2023.05.06 |
| Xcode/Mac OS에서 관리자가 아닌 개발자 권한 부여 (0) | 2023.05.06 |