How to set equal height for 2 position:absolute divs? - html

Question

I have 2 divs with position:absolute set, looking as such:
#nav {
position:absolute;
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%:
height: 100%;
}
The #content div often exceeds the pages size, requiring the user to scroll down.
But the #nav div stops at the bottom of the screen - it does not continue down the page as the user scrolls.
Is there any way to make both divs have equal height (without JQuery)?

Answer 1

You can do this with css tables. (but you'll have to remove position:absolute)
FIDDLE
Markup
<div id="css-table">
<div class="col narrow">some content</div>
<div class="col wide">content</div>
</div>
CSS
#css-table {
display: table;
height: 100%;
}
#css-table .col {
display: table-cell;
padding: 10px;
}
.narrow
{
background: lime;
}
.wide
{
background:aqua;
}

Answer 2

You could try a fixed positioning over the #nav.
So, instead of position: absolute;
try position: fixed only for the first div, i.e. #nav. This should make it always be on the screen no matter how much the user scrolls.

Answer 3

try these css
#nav {
position:absolute;
width: 300px;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
#content {
position: absolute;
width: 70%:
padding-bottom: 99999px;
margin-bottom: -99999px;
}

Answer 4

Since OP has not accepted any answer, m trying my luck.... :)I think the fault is in line width: 70%: for #content....there is : instead of ;...i tried your code here after replacing it in fiddle and looks fine to me :
Fiddle : http://jsfiddle.net/logintomyk/LDh5x/2/
HTML remaining the same, here is the CSS
#nav {
position:absolute;
border:1px solid #000; //to show the different divs
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%; //this was mistake point
height: 100%;
text-align:right; //to show the text
border:1px solid #CCC; //to show the different divs
}