CODEWITHSUNDEEP
htmlcss
redV
redV

Reputation: 684

Two variable auto height rows to occupy parent height (no JS)

I have two div elements inside a Parent div element with class names .variableHT, .remaining. Here is the html 

<div class="parent">
   <div class="variableHT">1234</div>
   <div class="remaining"></div>
</div>

and here is CSS

.parent{
  height:300px;
}
.variableHT{
  height:auto;
  background-color:green;
}
.remaining{
  margin-top:auto;
  margin-bottom:0px;
  background-color:yellow;
 }

I am trying to make two DIVs, first one is auto height element, height is not fixed, it will grow as per the content size. Then next DIV should occupy whatever the space is remaining. Tried adding margin values but did not workout.

Please help me on this. Here is the fiddle http://jsfiddle.net/GyULa/1/

Upvotes: 1

Views: 53

Answers (4)

raviolicode
raviolicode

Reputation: 2175

Try adding height: 100% to the variableHT:

Demo

.parent{
  height:300px;
  overflow:hidden;
}
.variableHT{
  height:auto;
  background-color:green;
}
.remaining{
  height: 100%
  background-color:yellow;
}

Upvotes: 2

Ismatjon
Ismatjon

Reputation: 1258

How about this one:

.parent{
    display: table;
    height: 300px;
    width: 100%;
}
.variableHT{
    height: auto;
    display: table-row;
    background-color: green;
}
.remaining{
    height: 100%;
    display: table-cell;
    background-color: yellow;
}

Here is fiddle link for it

Upvotes: 4

sebastian
sebastian

Reputation: 17368

First dirty fix...with "overflow:hidden" ;) But interesting question! Is there a more elegant way?

.parent{
    height:300px;
    overflow: hidden;
}
.variableHT{
    height:auto;
    background-color:green;
}
.remaining{
    margin-top:auto;
    margin-bottom:0px;
    background-color:yellow;
    height: 100%;
}

Upvotes: 2

JackArbiter
JackArbiter

Reputation: 5795

With overflow:hidden on .parent and a height specification on .remaining it works:

.parent{
    height:300px;
    overflow: hidden;
}
.variableHT{
    height:auto;
    background-color:green;
}
.remaining{
    margin-top:auto;
    margin-bottom:0px;
    background-color:yellow;
    height: 300px;
}

Upvotes: 2

Related Questions