CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John Smith
John Smith

Reputation: 6207

How to make 100% height inside a div?

<div id="a">
    <div style="background-color: green;">content above blue div</div>
    <div id="b">I want this as height as the #a<br /> and if bigger, I want to get<br /> scrollbars</div>
</div>

#a
{
    height: 100px;
    background-color: yellow;
}

#b
{
    background-color: blue;
}

Fiddle: http://jsfiddle.net/29ao3oLq/1/

the content in blue div can be longer, and I want to be as height as yellow div now. But I cant know the height because there is the green div, with unknown height.

Upvotes: 0

Views: 78

Answers (2)

Mouser
Mouser

Reputation: 13304

This css, using flexbox should do it.

#a
{
    height: 100px;
    background-color: yellow;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */    

}

#c
{
    background-color: green;

}

#b
{
    background-color: blue;
    overflow: auto;
    flex: 1;
}

Little adaptation to the HTML:

<div id="a">
    <div id="c" >content above blue div</div>
    <div id="b">I want this as height as the #a<br /> and if bigger, I want to get<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars</div>
</div>

Read more: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

See it: http://jsfiddle.net/29ao3oLq/3/

Cheers!

Upvotes: 3

Marc Audet
Marc Audet

Reputation: 46825

If you add a couple of wrapper elements, you can get realize this layout using CSS tables.

You may need to modify this if your content gets very long (causes scroll bars to appear).

#a {
  height: 100px;
  width: 100%;
  background-color: yellow;
  display: table;
}
#b {
  background-color: blue;
  height: 100%;
}
#a div.row {
  display: table-row;
}
#a div.row div {
  display: table-cell;
}
<div id="a">
  <div class="row r1">
    <div style="background-color: green;">content above blue div<br>more stuff</div>
  </div>
  <div class="row r2">
    <div id="b">I want this as height as the #a
      <br />and if bigger, I want to get
      <br />scrollbars</div>
  </div>
</div>

Upvotes: 2

Related Questions