CODEWITHSUNDEEP
htmlcssheight
Hcabnettek
Hcabnettek

Reputation: 12928

How can I set the height of a relative positioned element inside absolute positioned element?

I have something like this jsfiddle

<div id="foo">
  <div>
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </div>
</div>


 #foo {
   position: absolute;
   min-height: 300px;
   width: 400px;
 }

 #foo > div {
   position:relative;
 }

 .header, .footer {
   min-height: 30px;
 }

How can I make '#foo > div' take up the 300px of height set on #foo? I want to pin '.footer' to the bottom of '#foo > div' as well. '.main' should fill the remainder of the space even if it's empty and become scrollable when it's content warrants it.

I've struggled with this for a few hours so now time to ask the gurus. Any help with fiddles would be greatly appreciated. Thanks!

Upvotes: 0

Views: 91

Answers (3)

TXChetG
TXChetG

Reputation: 342

Firstly, you have a few errors to tidy up. In your HTML you call it fotter, but in the CSS it is footer. Secondly, in the HTML you have you divs with classes assigned, but in the CSS you are selecting IDs. Change one to the other and you're on the right track.

To make the footer stick to the bottom you could try this in your CSS:

.main {min-height: 240px;}

Here's a fiddle to see if it's what you're looking for: http://jsfiddle.net/Jzq2Q/

Best of luck.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

You might be looking for something like this:

http://jsfiddle.net/audetwebdesign/V2gdj/4/

Using the following CSS;

div {
    border: 1px solid gray;    
}

#foo {
    position: absolute;
    height: 300px;
    width: 400px;
}

#foo > div {
    position: relative;
    height: inherit;
}

.header, .footer {
    height: 30px;
}
.main {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    right: 0;
    outline: 1px solid blue;
    overflow: auto;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Explanation pending on your comments.

Upvotes: 1

Nelfo
Nelfo

Reputation: 3835

Your CSS is referencing ID's, but your divs have classes, not ID's. Plus, you have a typo in class="fotter"

Upvotes: 1

Related Questions