CODEWITHSUNDEEP
cssheightpercentage
jstacks
jstacks

Reputation: 2437

CSS: height % parent with min height % children (relatively positioned)

So, I might in fact be overthinking this entirely and should scrap min-height, but I am currently have the following HTML:

<div id='container'>
      <div id='nav'>
      </div>
      <div id='content'>
          <div id='main-content'>
                <div class='stuff'>
                </div>
                <div class='stuff'>
                </div>
                <div class='stuff'>
                </div>
          </div>
          <div id='side-bar'>
                 <div class='stuff'>
                </div>
                <div class='stuff'>
                </div>
                <div class='stuff'>
                </div>
          </div>
      </div>
 </div>

CSS:

#container {
     width:100%;
     height:100%;
     position:relative;
 }

#nav {
     width:1000px;
     height:40px;
     position:fixed;
         top:0;
}

  #content{
     width:100%;
     min-height: -webkit-calc(100% - 40px);
     min-height: -moz-calc(100% - 40px);
     min-height: calc(100% - 40px);
     margin-top:40px;
 }

#main-content{
     background:#e1e1e1;
     width:600px;
     height:100%;
     position:relative;

}

 #side-bar{
         background:#d1d1d1;
         width:400px;
         height:100%;
         position:absolute;
             right:0;

    }

I'm just looking for a simple two column layout, with the columns different colors -> always at least 100% height so that they fill out the screen. I set to min-height since if the content within overflows, I'd like the height of the parent 'content' div (and subsequently the 'container' div) to grow and allow the page to scroll.

Right now though... it seems min-height % doesn't work when within a parent with a height %. Let alone trickling down further.

Maybe I'm just approaching this entirely wrong though? I don't know.

Upvotes: 1

Views: 4073

Answers (1)

Haiz
Haiz

Reputation: 171

You have to declare the parent element height first before you declare the % height of the child element.

Upvotes: 1

Related Questions