How to make a div take the remaining height without knowing the height?


Tags: jquery,html,css

Problem :

I have 2 elements inside .container, that is .header and .overflowElem.

I want .overflowElem to take the remaining height of the .container, and it should be overflow-y: auto.

HTML

<div class="box">

  <div class="container">

    <div class="header">
      <h1>HEADER</h1>
    </div>

    <div class="overflowElem">
      <ul>
        <li><a href="#">ITEM 1</a></li>
        <li><a href="#">ITEM 2</a></li>
        <li><a href="#">ITEM 3</a></li>
      </ul>
    </div>

  </div>

</div>

All of this HTML is injected using jQuery's ajax, like so:

$.ajax({
    type: "GET",
    url: "include/get_list.php",
    data: params
}).done(function(data) {
    var container = $("<div></div>")
        .attr("class", "container")
        .html(data)
        .hide()
        .appendTo(box);

}).fail(function() {
    alert("Error.");

}).always(function(data) {

})

Notice how var container is hidden at the time of initialization

CSS :

div.box {
  width: 700px;
  border: 1px solid red;
  padding: 45px 20px 20px;
}

div.container {
  height: 500px;
  background-color: #bbb;
}

div.header {
  background-color: red;
  /* HEIGHT in pixels is UNKNOWN */
}

div.overflowElem {
  overflow-y: auto;
  /*
  CANNOT USE THIS BECAUSE i DON'T know the height of .header
  height: calc(100% - height of .header in pixels);*/
}

jsfiddle:

https://jsfiddle.net/n4z02gL2/1/

Now, i could add a height to .header and calculate the height of .overflowElem using calc() and bingo!

BUT, because all of the HTML is inserted using jQuery's ajax, and it's hidden at the moment of initialization, i don't tknowthe height neither i cant get it using ajax because the container is hidden

So, what is the solution? Any ideas, tips, tricks, hacks... Thanks



Solution :

Using flexbox all you have to do is update your div.container rule (without prefixing, for brevity).

div.container {
  height: 500px;
  background-color: #bbb;

  // add these properties here
  display: flex;
  flex-direction: column;
}

Granted, this is assuming your browser support allows you to use flexbox. CSS Tricks has a great write-up of flexbox here.


    CSS Howto..

    css: how to have a variable column size with text overflow ellipsis

    How can i get rid of the open space between the topside of my website and my navigation bar (bootstrap)

    How to hover a Fixed element until it reaches some point

    How to Horizontally Scroll Images In Single Line

    How to limit a to only three lines?

    How to restrict ol, ul css to a div?

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to override CSS for TextBoxFor field?

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    HTML/CSS How to make menu slide up when menu item is clicked?

    How can I refactor some repetitive HTML and CSS?

    How to make a resizable menu centered on the middle?

    How do I absolutely position a relatively positioned element?

    Jquery show/hide more data

    how to edit a css selector in order to shorten the amount of characters used in file

    How to Apply css class on runTime

    How do I align my navigation to the right without removing (display: inline;)?

    CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?

    How can I override inline styles with external CSS?

    How do I make a line feed in a div tag?

    How to add html glyph markup to JQuery show/hide function

    How to remove top / bottom margin from isotope masonry

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    How to make CSS URL background images show up in localhost?

    How do I keep my links in my table on 1 line?

    how to use javascript to get visited link css styles

    How do I spread out this navbar along with making the links exclusive to the button itself?

    How to apply CSS to elements that have multiple classes?

    How to prevent long text from flowing out of a container