0

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

Marco
  • 2,687
  • 7
  • 45
  • 61

1 Answers1

1

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.

chazsolo
  • 7,873
  • 1
  • 20
  • 44
  • nice solution! according to "ca i use" website, support is ok, except for IE (what a surprise)...http://caniuse.com/#search=flexbox – Marco Aug 22 '16 at 21:30
  • @Marco not that I've had to, but poking around I found there's some decent fallback options. [Using modernizr is probably a good choice](http://stackoverflow.com/questions/24371408/flexbox-alternative-for-ie9) – chazsolo Aug 22 '16 at 21:34
  • @Marco which IE ?? https://jsfiddle.net/n4z02gL2/2/ ( looks like a duplicate of http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486 ) – G-Cyrillus Aug 22 '16 at 21:34