Make div expand to take all the available space

This question already has an answer here:

Make a div fill the height of the remaining screen space 31 answers

---

The easiest way to achieve this is using flexbox.

You assign display: flex to the parent container. in your case this is outer .outer .

a flexbox works in a single direction. So you can look at them like a column (vertical) or row(horizontal). The default setting is that it spreads the children elements out over a row. But we want to create a column. Therefore we have to change the flex-direction on .outer to flex-direction: column .

Now we need to specify how we want the flexbox to divide the amount of space available in the .outer . Normal behaviour is that the flexbox gives its children their normal width/height. But by assigning flex:1 to .should_fill_available_space , this element will get all the extra available space. What the flexbox basically says is that we want the computer to use all 1/1 = 100% (used flex value divided by the total flex value of all children) available room to apply to .should_fill_available_space , while keeping minimal space for the .menu width. Technically flex: is a shorthand for some other properties, but that doesn't really matter for this question.

Here is your JS-Fiddle: https://jsfiddle.net/cryh53L7/

html

<div class="outer">
  <div class="menu">
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
  </div>
  <div id="this" class="should_fill_available_space">
    Brown color should go all the way down
  </div>
</div>

css

 div{
      padding: 0px
    }
    html, body{
      height: 100%;
      padding: 0px;
      margin: 0px;
    }
    .outer {
      display: flex;
      flex-direction: column;
      background: olive;
      height: 100%;
    }
    .menu{
      background: orange;

    }
    .should_fill_available_space{
      flex: 1;
      background: brown;

    }

---

Try this!

I used a table display, I hope it is okay for you :)

HTML:

<div class="outer">
 <div class="menu">
   Lorem Ipsum
   Lorem Ipsum
   Lorem IpsumLorem Ipsum
   Lorem Ipsum
   Lorem IpsumLorem Ipsum
   Lorem Ipsum
   Lorem IpsumLorem Ipsum
   Lorem Ipsum
   Lorem IpsumLorem Ipsum
   Lorem Ipsum
   Lorem IpsumLorem Ipsum
   Lorem Ipsum
   Lorem IpsumLorem Ipsum
 </div>
 <div id="this" class="should_fill_available_space">
   Brown color should go all the way down
 </div>

CSS:

div{
 padding: 0px
}
html, body{
  height: 100%;
  padding: 0px;
  margin: 0px;
}
.outer {
 background: olive;
 height: 100%;
 display:table;
 width:100%;
}
.menu{
 background: orange;
 display:table-row;

}
.should_fill_available_space{
 background: brown;
 display:table-row;
}

div+ div{
 height:100%;
}

---

You can achieve this with flexbox in CSS3 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Update your CSS like this to see it working:

.outer {
    background: olive;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.should_fill_available_space{
  background: brown;
  flex-grow: 2;
}

链接地址: http://www.djcxy.com/p/88248.html

上一篇: 强制一个容器填充剩余空间

下一篇: 使div扩展以占用所有可用空间