남은 높이를 100 % 채우는 방법?

Question 1

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

위와 같이 (1)의 내용은 동적으로 생성되는 페이지에서 증가 또는 감소 할 수 있으므로 알려지지 않았습니다. 위에 표시된 두 번째 div (2)는 나머지 공간을 채워야합니다.

다음은 내 HTML의 예입니다.

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

css ...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

아니면이 방법이 잘못 되었습니까? 어떻게해야합니까? 내 데모 를보고 내 실수를 보여주세요.

Question 2

div ( #header아래)를 추가 하여 내용을 1로 래핑 하면이 작업을 수행 할 수 있습니다 .

float #header이면의 콘텐츠 #someid가 강제로 그 주위로 흐르게됩니다.
다음으로 #header의 너비를 100 %로 설정합니다. 이렇게하면 포함하는 div의 너비를 채우도록 확장됩니다 #full. 이것은 더 이상 측면 주위로 흐를 공간이 없기 때문에 모든 #someid의 콘텐츠를 아래로 효과적으로 밀어 냅니다 #header.
마지막으로 #someid의 높이를 100 %로 설정하면와 같은 높이가됩니다 #full.

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

최신 정보

Flexbox는 오늘날 최신 브라우저에서 잘 지원된다는 점을 언급 할 가치가 있다고 생각합니다. CSS는 변경 #full될 수 있으며 플렉스 컨테이너 가 되었으며 #someid플렉스 성장을보다 큰 값으로 설정해야합니다 0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}

Question 3

div페이지에서 100 % 높이 를 얻으려면 div 위의 계층 구조에있는 각 개체도 100 %로 설정해야합니다. 예를 들면 :

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

귀하의 질문을 완전히 이해할 수는 없지만 이것이 귀하가 의미하는 바라고 가정합니다.

이것은 내가 일하고있는 예입니다.

<html style="height:100%">
    <body style="height:100%">
        <div style="height:100%; width: 300px;">
            <div style="height:100%; background:blue;">

            </div>
        </div>
    </body>
</html>

Style 내가 외부화하지 않은 CSS의 대체물 일뿐입니다.

Question 4

이것은 테이블로 수행 할 수 있습니다.

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            <!--contents of 1 -->
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            <!--contents of 2 -->
        </div>
    </td></tr>
</table>

그런 다음 css를 적용하여 someid가 나머지 공간을 채우도록합니다.

#someid {
    height: 100%;
}

이제 군중들로부터 화난 소리가 들립니다. "오, 그는 테이블을 사용하고 있습니다! 그를 사자에게 먹이세요!" 내 말을 들어주세요.

컨테이너 div를 페이지의 전체 높이로 만드는 것 외에는 아무것도 수행하지 않는 수락 된 답변과 달리이 솔루션은 질문에서 요청한대로 div # 2가 나머지 공간을 채우도록합니다. 할당 된 전체 높이를 채우기 위해 두 번째 div가 필요한 경우 현재로서는 이것이 유일한 방법입니다.

그러나 물론 내가 틀렸다는 것을 증명할 수 있습니다! CSS는 항상 더 좋습니다.

Question 5

    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }

    <div class="parent">
        <div class="child-top">
          This child has just a bit of content
        </div>
        <div class="child-bottom">
          And this one fills the rest
        </div>
    </div>

스 니펫 확장

Question 6

나는 이것이 늦은 입장이라는 것을 알고 있지만 2016 년에도 플렉스에 대한 IE 지원이 완전히 부족하다는 사실에 놀랐습니다 (현재 11은 그것을 지원하는 유일한 사람이며 http://caniuse.com/#feat= 에서 크게 버그가 있습니다 . Flexbox )는 비즈니스 관점에서 좋지 않습니다! 그래서 IE가 최상의 솔루션을 종료 할 때까지 브라우저 간 친화적 인 가장 적합한 솔루션은 JS / Jquery 여야한다고 생각합니다.

대부분의 사이트는 이미 Jquery를 사용하며 매우 간단한 예 (내 코드)는 다음과 같습니다.

$('#auto_height_item').height($(window).height() - $('#header').height());

분명히 창과 헤더를 교체하고 기본 수학이 작업을 수행하도록 할 수 있습니다. 개인적으로 나는 아직 플렉스에 대해 확신하지 못합니다 ...

Question 7

너무 짧은 페이지에 이것을 추가했습니다.

html :

<section id="secondary-foot"></section>

CSS :

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}

Question 8

div (full 및 someid)를 모두 포함하는 div를 만들고 해당 div의 높이를 다음과 같이 설정합니다.

높이 : 100vh;

포함하는 div (full 및 someid)의 높이는 "auto"로 설정되어야합니다. 그게 다야.

Question 9

나는 이것이 오래된 질문이라는 것을 알고 있지만 요즘에는 CCS Grid라는 매우 쉬운 형식이 있으므로 div를 예로 들어 보겠습니다.

<div id="full">
  <div id="header">Contents of 1</div>
  <div id="someid">Contents of 2</div>
</div>

그런 다음 CSS 코드 :

.full{
  width:/*the width you need*/;
  height:/*the height you need*/;
  display:grid;
  grid-template-rows: minmax(100px,auto) 1fr;
 }

그게 전부입니다. 두 번째 행인 scilicet, someide는 속성 1fr 때문에 나머지 높이를 차지하고 첫 번째 div는 최소 100px와 필요한 최대 값을 갖습니다.

저는 CSS가 프로그래머의 삶을 더 쉽게 만들기 위해 많이 발전했다고 말해야합니다.