How to make div occupy remaining height?

Question

I have this problem, I have two divs:

<         


        
                      

              相关标签:
       
      

Answer 1

Use absolute positioning:

#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>

Answer 2

Demo

One way is to set the the div to position:absolute and give it a top of 50px and bottom of 0px;

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

Answer 3

I tried with CSS, and or you need to use display: table or you need to use new css that is not yet supported on most browsers (2016).

So, I wrote a jquery plugin to do it for us, I am happy to share it:

 
//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>

Answer 4

You could use calc function to calculate remaining height for 2nd div.

*{
  box-sizing: border-box;
}

#div1{
  height: 50px;
  background: skyblue;
}

#div2{
  height: calc(100vh - 50px);
  background: blue;
}

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

Answer 5

Why not use padding with negative margins? Something like this:

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

And then

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

Answer 6

You can use

display: flex;

CSS property, as mentioned before by @Ayan, but I've created a working example: https://jsfiddle.net/d2kjxd51/