div가 나머지 높이를 차지하도록 만드는 방법은 무엇입니까?

div가 나머지 높이를 차지하도록 만드는 방법은 무엇입니까?

---

이 문제가 있으며 두 개의 div가 있습니다.

<div style="width:100%; height:50px;" id="div1"></div>
<div style="width:100%;" id="div2"></div>

div2가 페이지의 나머지 높이를 차지하게하려면 어떻게해야합니까?

---

절대 위치 지정 사용 :

#div1{
    width: 100%;
    height: 50px;
    background-color:red;/*Development Only*/
}
#div2{
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color:blue;/*Development Only*/
}

<div id="div1"></div>
<div id="div2"></div>

---

http://jsfiddle.net/Victornpb/S8g4E/783/을 사용할 수 있습니다.

#container {
    display: table;
    width: 400px;
    height: 400px;
}
#container > div{
    display: table-row;
    height: 0;
}
#container > div.fill{
    height: auto;
}

클래스 .fill를 아이들에게 적용하여 나머지 높이를 차지하십시오.

<div id="container">
    <div>
        Lorem ipsum
    </div>
    <div>
        Lorem ipsum
    </div>
    <div class="fill">   <!-- this will fill the remaining height-->
        Lorem ipsum
    </div>
</div>

원하는 자녀 수와 함께 작동하며 추가 마크 업이 필요하지 않습니다.

---

데모

한 가지 방법은 div를로 설정하고 position:absolute상단에 50px, 하단에 0px를 부여하는 것입니다.

#div2
{
    position:absolute;
    bottom:0px;
    top:50px
}

---

이전 콘텐츠가 차지하는 픽셀 수를 알고 있으므로 다음 calc()함수를 사용할 수 있습니다 .

height: calc(100% - 50px);

---

CSS 테이블을 사용하면 거기에있는 두 개의 div를 감싸고 다음 css / html 구조를 사용할 수 있습니다.

<style type="text/css">
.container { display:table; width:100%; height:100%;  }
#div1 { display:table-row; height:50px; background-color:red; }
#div2 { display:table-row; background-color:blue; }
</style>

<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

그러나 이러한 디스플레이 유형을 지원하는 브라우저에 따라 다릅니다. IE8 이하는 그렇지 않다고 생각합니다. 편집 : 스크래치 --IE8은 CSS 테이블을 지원합니다.

---

당신이 사용할 수있는

display: flex;

@Ayan이 이전에 언급했듯이 CSS 속성이지만 작업 예제를 만들었습니다 : https://jsfiddle.net/d2kjxd51/

---

CSS로 시도했거나 display : table을 사용해야하거나 대부분의 브라우저 (2016)에서 아직 지원되지 않는 새 CSS를 사용해야합니다.

그래서 우리를 위해 jquery 플러그인을 작성했습니다. 공유하게되어 기쁩니다.

 
//Credit Efy Teicher
$(document).ready(function () {
            $(".fillHight").fillHeight();
            $(".fillWidth").fillWidth();
        });

        window.onresize = function (event) {
            $(".fillHight").fillHeight();
            $(".fillWidth").fillWidth();
        }

        $.fn.fillHeight = function () {
            var siblingsHeight = 0;
            this.siblings("div").each(function () {
                siblingsHeight = siblingsHeight + $(this).height();
            });

            var height = this.parent().height() - siblingsHeight;
            this.height(height);
        };

 
        $.fn.fillWidth = function (){
            var siblingsWidth = 0;
            this.siblings("div").each(function () {
                siblingsWidth  += $(this).width();
            });

            var width =this.parent().width() - siblingsWidth;
            this.width(width);
        }

      * {
            box-sizing: border-box;
        }

        html {
        }

        html, body, .fillParent {
            height: 100%;
            margin: 0;
            padding: 0;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="fillParent" style="background-color:antiquewhite">
        <div>
            no1
        </div>
        <div class="fillHight">
            no2 fill
        </div>
        <div class="deb">
            no3
        </div>
    </div>

---

나는 같은 도전에 직면했고 flex속성을 사용 하여이 두 가지 답변을 찾았습니다 .

CSS

.container {
  display: flex;
  flex-direction: column;
}

.dynamic-element{
  flex: 1;
}

• https://stackoverflow.com/a/35348188/1084619
• https://stackoverflow.com/a/35348188/1084619

---

<div>
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>

#header {
  height: 200px;
}

#content {
  height: 100%;
  margin-bottom: -200px;
  padding-bottom: 200px;
  margin-top: -200px;
  padding-top: 200px;
}

#footer {
  height: 200px;
}

---

여백이 음수 인 패딩을 사용하지 않는 이유는 무엇입니까? 이 같은:

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>

그리고

.parent {
  padding-top: 1em;
}
.child1 {
  margin-top: -1em;
  height: 1em;
}
.child2 {
  margin-top: 0;
  height: 100%;
}

참고 URL : https://stackoverflow.com/questions/7198282/how-to-make-div-occupy-remaining-height