floating sidebar needs to be 100% height issue

Question

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>

Do you need 2000px height for the .dummy-height{ height:2000px; background-color:#777; } — Asraful Haque, Dec 26 '13 at 19:58
Given that you've got a non-fluid layout there, have you considered setting a background image on #container to give the desired appearance? It wouldn't actually make the aside element that high, but could get you the same visual result. — technoTarek, Dec 26 '13 at 19:59
possible duplicate of [Need CSS sidebar height to expand with content](http://stackoverflow.com/questions/1610710/need-css-sidebar-height-to-expand-with-content) — Markus Kottländer, Dec 26 '13 at 20:04
Re my background image suggestion: http://jsfiddle.net/technotarek/gKtQ6/ — technoTarek, Dec 26 '13 at 20:06

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

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/

edited May 23 '17 at 10:32

Community

1
1

answered Dec 26 '13 at 20:04

Zword

6,605
3
27
52

This negates `float: left;` you might as well remove it. – Adrift Dec 26 '13 at 20:21

score 0 · Answer 2 · answered Dec 26 '13 at 20:05

0

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

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

answered Dec 26 '13 at 20:05

Mateusz Nowak

4,021
2
25
37

floating sidebar needs to be 100% height issue

2 Answers2