Make div expand to take all the available space [duplicate]

问题

I want a desktop-like full-page width layout. Some menu at the top (uknown height, depending on the content), and div underneath that takes ALL the available space in viewport.

div {
  padding: 0px
}

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

.outer {
  background: olive;
  height: 100%;
}

.menu {
  background: orange;
}

.should_fill_available_space {
  background: brown;
}

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

I've got a codepen for this case: https://codepen.io/marek-zganiacz/pen/NvEaxr

I want should_fill_available_space go all way down, as in the case where menu would have height:10% and should_fill_available_space have 'height:90%`.

回答1:

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;

    }

回答2:

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

回答3:

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

回答4:

This is where the world of web document standards meets viewport based desktop application emulation. You need containers to be positioned absolute. Within these containers you will be able to setup relative position elements or use elements that will use the html flow.

There are numerous APIs out there which will do just that under the covers and they will invariably rely on javascript calculations to place elements according to their dimensions after being attached to the DOM.

Here is a simple example based on your code:

div{
  padding: 0px
}
html, body{
  height: 100%;
  padding: 0px;
  margin: 0px;
}
.outer {
  background: olive;
  height: 100%;
  width:100%
  position:absolute;
}
.menu{
  background: orange;
}
.should_fill_available_space{
  background: brown;
  position:absolute;
  bottom:0px;
  width:100vw;
}

<div class="outer">
  <div id="menu" 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>

As I mentioned, you can use javascript to retrieve the dimension of the menu and than apply that to your layout.

window.addEventListener("load", function load(event){
    var menu = document.getElementById("menu");
  var main = document.getElementById("this");
  var menuHeight = menu.offsetHeight;
  main.style.top = menuHeight + "px";
},false);

And here is the codepen.

来源：https://stackoverflow.com/questions/45948202/make-div-expand-to-take-all-the-available-space

标签

javascript

html

css