CODEWITHSUNDEEP
htmlcss
user759235
user759235

Reputation: 2207

floating sidebar needs to be 100% height issue

I am looking for a solution to have an sidebar thats the same height as the content part. I have tried a lot of stuff but nothing is working. As you can see in the fiddle the sidebar is not a 100% as his parent(and the content part).

example here http://jsfiddle.net/94mGd/

CSS

  html{
      min-height:100%;  
  }
  body{
      min-height:100%;
      background-color:#eee;
  }
  #container{
      background-color:#ccc;
  } 
  aside{
      width:260px;
      float:left;
      background-color:#333;
      min-height:100%
  }
  #content{
      min-height:100%;
      margin-left:300px;
  }
  .dummy-height{
      height:2000px;
      background-color:#777;
  }

HTML

  <div id="container">     
      <aside> 
      sidebar  
      </aside>

      <div id="content">
          <div class="dummy-height">
          dummy
          </div>
      </div> 
  </div>

Upvotes: 0

Views: 678

Answers (2)

Zword
Zword

Reputation: 6793

Just give absolute positioning to the element and it will work:

http://jsfiddle.net/94mGd/3/

  aside{
      position:absolute;
      width:260px;
      float:left;
      background-color:#333;
      min-height:100%
  }

Similar Question page(solved) : How to make a floated div 100% height of its parent?

To solve the problem of 100% height together with float use a parent div for float:

<div id="floatL" style="float:left;">
  <aside> 
  sb   
  </aside>
</div>

http://jsfiddle.net/94mGd/5/

Upvotes: 1

Mateusz Nowak
Mateusz Nowak

Reputation: 4121

Try to add height: 100% to every parent element You have not added this to #container.

#container {
      background-color:#ccc;
      height: 100%;
}

Upvotes: 0

Related Questions