CODEWITHSUNDEEP
htmlcss
squirrelInTheBarel
squirrelInTheBarel

Reputation: 154

how to make dynamic height for div

is there possibility to have a div height which depends on size of other divs?

Here is the example

<div id="wrapper" style="height:400px;background-color:green;">

   <div id="content1" style="height:auto;min-height:50%;background-color: limegreen;">
       Content 1
   </div>

   <div id="content2" style="min-height:20%;background-color:lightblue;">
        Content  2
</div>

<div id="content3" style="min-height:20%;background-color:blue;">
      Content 3 
</div>

</div>

You can see it also here: http://jsfiddle.net/kXfsY/28/

You can see, div wrapper is not overlapped by the others divs. I would like to have div content1 to have height at least 50% of div wrapper or more, so whole div wrapper will be overlapped. The size of div content 2 and 3 will be dynamic, depends how many items will be inside. Or maybe div content 2 or div content 3 will be empty, then would be nice if to div content1 will increase and full height of div wrapper will be used.

Is that possible?

Thank you

Upvotes: 0

Views: 779

Answers (1)

cimmanon
cimmanon

Reputation: 68319

You can do this with display: table and display: table-row. You can either remove the #content2/#content3 elements or make them be empty tags. The `#content1 element will take up all remaining space no matter what.

http://codepen.io/cimmanon/pen/pHAcJ

#wrapper {
  height:400px;
  background-color:green;
  display: table;
  width: 100%;
  table-layout: fixed;
}

#content1 {
  min-height:50%;
  background-color: limegreen;
  display: table-row;
}

#content2, #content3 {
  height:20%;
  display: table-row;
}

#content2:empty, #content3:empty {
  display: none;
}

#content2 {
  background-color:lightblue;
}

#content3 {
  background-color:blue;
}

Upvotes: 1

Related Questions