css - 자동 - html 화면 크기 조절




div가 나머지 화면 공간의 높이를 채우도록하십시오. (20)

면책 조항 : 허용 된 대답은 솔루션에 대한 아이디어를 제공하지만 불필요한 래퍼 및 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 */
}

위의 솔루션은 뷰포트 단위http://caniuse.com/#feat=flexbox 를 사용하므로 IE10 +의 이전 구문을 사용하면 IE10 +가됩니다.

코덱 (Codepen) : 코덱 간 링크

또는 콘텐트가 넘칠 경우 주 컨테이너를 스크롤 할 수 있도록해야하는 경우 : codepen에 대한 링크

나는 현재 전체 화면의 높이를 채우고 싶은 웹 애플리케이션을 만들고있다.

페이지에는 로고가 들어있는 머리글과 계정 정보가 있습니다. 이것은 임의의 높이 일 수 있습니다. 콘텐츠 div가 페이지의 나머지 부분을 맨 아래쪽에 채우 길 원합니다.

header div 와 content 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 %로 설정됩니다. content header 넣으면 작동하지 않습니다.

table 을 사용하지 않고 동일한 효과를 얻을 수있는 방법이 있습니까?

최신 정보:

콘텐츠 div 내부 요소의 높이도 백분율로 설정됩니다. 그래서 div 안에 100 % 무언가가 바닥에 채울 것입니다. 50 %의 두 요소가 그렇듯이.

업데이트 2 :

예를 들어, 헤더가 화면 높이의 20 %를 차지하면 #content 내부의 50 %로 지정된 테이블이 화면 공간의 40 %를 차지합니다. 지금까지 테이블 전체를 포장하는 것이 유일한 방법입니다.


CSS 만 접근 (높이를 알고 있거나 고정 된 경우)

중간 요소를 전체 페이지에 수직으로 배치하려면 CSS3에 도입 된 calc() 를 사용할 수 있습니다.

고정 된 높이의 headerfooter 요소가 있다고 가정하고 section 태그가 전체 높이를 사용할 수있게하려는 경우 ...

Demo

가정 된 마크 업

<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;
}

여기에서 요소의 높이를 더하고 calc() 함수를 사용하여 100% 에서 공제하는 것입니다.

height: 100%; 부모 요소에 대해.



그것은 순수하게 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 , IEFireFox


나는 이것에 대한 해답을 찾고 있었다. IE8 이상을 대상으로 할 수있을만큼 충분히 행운이라면 display:table 및 관련 값을 사용하여 div를 비롯한 블록 수준 요소가있는 테이블의 렌더링 규칙을 가져올 수 있습니다.

사용자가 더 운이 좋고 사용자가 최상위 계층 브라우저를 사용하는 경우 (예를 들어, 최신 프로젝트처럼 제어하는 ​​컴퓨터의 인트라넷 응용 프로그램 인 경우) CSS3에서 새로운 Flexible Box Layout 을 사용할 수 있습니다!


나는 이것을 잠시 멈추고 다음과 같이 끝냈다.

내용 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%;
}

나에게 그것은 단지 설계 문제 였기 때문에 나는 아주 간단한 해결책을 발견했다. 페이지의 나머지 부분이 빨간색 바닥 글 아래의 흰색이 아니길 바랬습니다. 그래서 나는 배경색을 빨간색으로 설정했다. 그리고 내용이 흰색으로 배경 색상. 내용 높이를 eg로 설정하십시오. 20em 또는 50 % 거의 비어있는 페이지는 전체 페이지를 빨간색으로 남겨 두지 않습니다.


마크 업에서 테이블을 사용하는 대신 CSS 테이블을 사용할 수 있습니다.

마크 업

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(관련) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1FIDDLE2

이 방법의 몇 가지 이점은 다음과 같습니다.

1) 마크 업 감소

2) 마크 업은 표보다 의미가 있습니다. 표 형식 데이터가 아니기 때문입니다.

3) 브라우저 지원은 매우 좋습니다 : IE8 +, 모든 최신 브라우저 및 모바일 장치 ( caniuse )

완전성을 위해, CSS 테이블 모델에 대한 CSS 속성에 해당하는 Html 요소는 다음과 같습니다.

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 } 

빈센트, 새 요구 사항을 사용하여 다시 대답하겠습니다. 콘텐츠가 너무 길어도 숨겨져 있어도 상관하지 않으므로 헤더를 뜨지 않아도됩니다. 오버플로를 html 태그와 body 태그에 숨기고 #content height를 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>

실제로 display: table 을 사용하여 영역을 두 개의 요소 (머리글 및 내용)로 분할 할 수 있습니다. 머리글의 높이가 달라질 수 있으며 내용이 나머지 공간을 채 웁니다. 이것은 전체 페이지뿐만 아니라 영역이 relative , absolute 또는 fixed relative 설정된 위치로 position 다른 요소의 컨텐츠 일 때도 마찬가지입니다. 상위 요소의 높이가 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>

앨리언 씨의 아이디어를 되 돌리는 중 ...

이것은 CSS3 지원 브라우저 용 인기있는 플렉스 박스보다 더 깨끗한 해결책입니다.

콘텐츠 블록에 calc ()와 함께 min-height (높이 대신)를 사용하기 만하면됩니다.

calc ()는 100 %로 시작하여 머리말과 꼬리말의 높이를 뺍니다 (패딩 값 포함 필요)

"height"대신 "min-height"를 사용하면 자바 스크립트로 렌더링 된 내용과 Angular2와 같은 JS 프레임 워크에서 작동 할 수 있으므로 특히 유용합니다. 그렇지 않으면 자바 스크립트로 렌더링 된 내용이 표시되면 계산이 바닥 글을 페이지 아래쪽으로 밀어 내지 않습니다.

다음은 두 가지 모두에 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));
}

물론 수학은 단순화 될 수 있지만 아이디어를 얻으려면 ...


왜 이렇게 좋아하지 않는거야?

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과 body를 (순서대로) 높이를 부여한 다음 요소에 높이를 둡니다.

나를 위해 일한다.


이 시도

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

이전 브라우저 (즉, MSIE 9 또는 이전 버전)를 지원하지 않을 수 있다면 이미 W3C CR 인 http://caniuse.com/#feat=flexbox 을 사용하여이를 수행 할 수 있습니다. 이 모듈을 사용하면 콘텐츠를 다시 주문하는 것과 같은 멋진 트릭을 사용할 수 있습니다.

안타깝게도 MSIE 9 이하는이를 지원하지 않으므로 Firefox 이외의 모든 브라우저에서 CSS 속성에 대한 공급 업체 접두사를 사용해야합니다. 다행히도 다른 공급 업체도 곧 접두사를 삭제하기를 바랍니다.

또 다른 선택은 CSS 그리드 레이아웃 이지만 브라우저의 안정 버전에서 더 적은 지원을받습니다. 실제로 MSIE 10만이이를 지원합니다.


지금 엄청난 해답이 있지만 높이를 사용하여 발견 : 100vh; 사용할 수있는 전체 수직 공간을 채워야하는 div 요소에서 작업 할 수 있습니다.

이런 식으로, 저는 디스플레이 나 위치를 가지고 놀 필요가 없습니다. 이것은 사이드 스트랩과 메인이있는 대시 보드를 만들기 위해 부트 스트랩을 사용할 때 편리했습니다. 메인이 뻗어 전체 배경 공간을 채울 수 있도록 전체 세로 공간을 채우고 싶었습니다.

div {
    height: 100vh;
}

IE9 이상을 지원합니다 : 링크를 클릭하십시오


콘텐츠가 너무 크면 하단 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;
}

원본 소스 : CSS에서 오버 플로우를 처리하는 동안 컨테이너의 남은 높이 채우기

JSFiddle 실시간 미리보기


CSS3 단순한 방법

height: calc(100% - 10px); // 10px is height of your first div...

요즘 모든 주요 브라우저가 지원하므로 빈티지 브라우저를 지원할 필요가 없다면 계속 진행하십시오.


CSS 에서 view height 를 나타내는 vh 를 사용하는 것이 어떻습니까?

아래에서 작성한 코드 스 니펫을 보고 실행하십시오.

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

또한 내가 만든 아래 이미지를보십시오.


그것은 자바 스크립트의 사용과 다음 다른 방법으로 나를 위해 일한 적이 NICCAI이 매우 첫 번째 대답에 제안. 나는 그 접근 방식을 사용 <div>하여 구글 맵스 를 재조정하고있다 .

다음은 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>

 style="height:100vh"

나를 위해 문제를 해결했다. 필자의 경우에는 필수 div에 적용했습니다.





html-table