Make div stretch to length of it's content and beyond if parent div is longer?

Question

I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that. But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content. This is the index page . Everything looks exactly the way I want it to. This is a sample page . Notice that the sidebar has been cut. CSS: ``` #menu-container { background-image: url('floral.png'); width: 300px; display: inline-block; vertical-align: top; height: 100%; overflow: hidden; position: absolute; } #menu { background-image: url('menubg.png'); width: 220px; margin: 0; padding-top: 50px; padding-left: 30px; padding-right: 20px; color: #e8e8e8; height: 100%; } #content { padding: 0px 0px 30px 325px; width: 1000px; display: inline-block; vertical-align: top; } ``` Thanks in advance! * @Ritabrata Gautam * The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See h…

Accepted Answer

```
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
```

try this..it will give you the result you want..though there are many other mistakes in your html markup

some other areas where you need to be careful...

your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using `overflow:hidden;` you cant see the effect...why dont you apply `overflow:auto; width:100%` or something like that

BETTER CSS::

```
#container {
 height: 100%;
 width: 100%;
 overflow: auto;
 position: absolute;
}
```

ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible

CHANGED CSS ::

```
#container {
 height: auto;
 overflow: hidden;
 position: absolute;
 width: 100%;
}
```

your third problem :: strange...you are now using `width:100%` for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container now your css

```
 #container {
  height: auto;
  overflow: hidden;
  width: 100%;
 }
 #content {
  padding: 0px 0px 30px 325px;
 vertical-align: top;
 }
```

NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question

Make div stretch to length of it's content and beyond if parent div is longer?

Solution

Problem