Best IT Recipes

CSS Sidebar Height 100%

I knocked my head against the wall for several hours, trying to understand this problem and I think that it should be something small that I am missing. I searched on the internet but found nothing, it seems to work. HTML:

<body> <div id="header"> <div id="bannerleft"> </div> <div id="bannerright"> <div id="WebLinks"> <span>Web Links:</span> <ul> <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li> <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li> <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li> </ul> </div> </div> </div> <div id="Sidebar"> <div id="SidebarBottom"> </div> </div> <div id="NavigationContainer"> <ul id="Navigation"> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> </ul> </div> <div id="Main"> <!-- content --> </div> </body>

My full CSS:

 * { margin: 0px; padding: 0px; } body { font-family: Calibri, Sans-Serif; height: 100%; } #header { width: 100%; z-index: 1; height: 340px; background-image: url("../../Content/images/bannercenter.gif"); background-repeat: repeat-x; } #header #bannerleft { float: left; background-image: url("../../Content/images/bannerleft.gif"); background-repeat: no-repeat; height: 340px; width: 439px; z-index: 2; } #bannerright { float: right; background-image: url("../../Content/images/bannerright.gif"); background-repeat: no-repeat; width: 382px; height: 340px; background-color: White; z-index: 2; } #Sidebar { width: 180px; background: url("../../Content/images/Sidebar.png") repeat-y; z-index: 2; height: 100%; position: absolute; } #SidebarBottom { margin-left: 33px; height: 100%; background: url("../../Content/images/SidebarImage.png") no-repeat bottom; } #NavigationContainer { position: absolute; top: 350px; width: 100%; background-color: #bbc4c3; height: 29px; z-index: 1; left: 0px; } #Navigation { margin-left: 190px; font-family: Calibri, Sans-Serif; } #Navigation li { float: left; list-style: none; padding-right: 3%; padding-top: 6px; font-size: 100%; } #Navigation a:link, a:active, a:visited { color: #012235; text-decoration: none; font-weight: 500; } #Navigation a:hover { color: White; } #WebLinks { float: right; color: #00324b; margin-top: 50px; width: 375px; } #WebLinks span { float: left; margin-right: 7px; margin-left: 21px; font-size: 10pt; margin-top: 8px; font-family: Helvetica; } #WebLinks ul li { float: left; padding-right: 7px; list-style: none; } #WebLinks ul li a { text-decoration: none; font-size: 8pt; color: #00324b; font-weight: normal; } #WebLinks ul li a img { border-style: none; } #WebLinks ul li a:hover { color: #bcc5c4; }

I want the sidebar to stretch in height with the contents of my page and leave the bottom image of the sidebar at the bottom of the sidebar.

+61
css
Apr 26 '09 at 17:20
source share
14 answers

UPDATE:. Since this answer still gets votes both up and down, and at the time of writing eight years: there are probably better methods. Below is the original answer.



Obviously you're looking for Faux columns :-)

By how the height property is computed, you cannot set height: 100% inside that which has automatic height.

+21
Apr 26 '09 at 17:32
source share

It worked for me

 .container { overflow: hidden; .... } #sidebar { margin-bottom: -5000px; /* any large number will do */ padding-bottom: 5000px; .... }
+88
Dec 09 '11 at 20:44
source share

Until CSS flexbox becomes more common, you can always simply position the sidebar, holding its zero pixels from the top and bottom, and then set the margin on your main container to compensate.

Jsfiddle

http://jsfiddle.net/QDCGv/

HTML

 <section class="sidebar">I'm a sidebar.</section> <section class="main">I'm the main section.</section>

CSS

 section.sidebar { width: 250px; position: absolute; top: 0; bottom: 0; background-color: green; } section.main { margin-left: 250px; }

Note This is an easy way to do this, but you will find that bottom does not mean “bottom of the page,” but “bottom of the window.” The sidebar is likely to be interrupted if your main content scrolls down.

+25
Dec 28
source share

I would use css tables to achieve 100 percent sidebar height.

The basic idea is to wrap the sidebar and main divs in the container.

Give the container a display:table

And give 2 child divs (sidebar and main) a display: table-cell

So ..

 #container { display: table; } #main { display: table-cell; vertical-align: top; } #sidebar { display: table-cell; vertical-align: top; }

Take a look at this LIVE DEMO , where I changed your initial markup using the technique described above (I have the background colors used for different divs so you can see which ones)

+13
Jan 17 '13 at
source share

I came across this problem several times in different projects, but found a solution that works for me. You should use four div tags - one that contains the sidebar, the main content, and the footer.

First, the item styles in the stylesheet:

 #container { width: 100%; background: #FFFAF0; } .content { width: 950px; float: right; padding: 10px; height: 100%; background: #FFFAF0; } .sidebar { width: 220px; float: left; height: 100%; padding: 5px; background: #FFFAF0; } #footer { clear:both; background:#FFFAF0; }

You can edit various elements, but you want to, just make sure that you do not change the "clear: both" footer property - this is very important to leave.

Then just set up your web page as follows:

 <div id="container"> <div class="sidebar"></div> <div class="content"></div> <div id="footer"></div> </div>

I wrote a more detailed blog post about it at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container . Please let me know if you have any questions. Hope this helps!

+4
Aug 22 '10 at 21:21
source share

In addition to @montrealmike's answer, can I just add my adaptation?

I have done this:

 .container { overflow: hidden; .... } #sidebar { margin-bottom: -101%; padding-bottom: 101%; .... }

I made "101%" to satisfy the (very rare) possibility that someone could view the site on a huge screen with a height of more than 5000 pixels!

Great answer though, montrealmike. This worked great for me.

+4
Feb 01 '14 at 18:29
source share

Flexbox ( http://caniuse.com/#feat=flexbox )

First wrap the desired columns in a div or section, for example:

 <div class="content"> <div class="main"></div> <div class="sidebar"></div> </div>

Then add the following CSS:

 .content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
+4
Sep 17 '15 at 21:00
source share

Perhaps Multiple Column Layouts go out of the box - is this what you are looking for?

+2
Apr 26 '09 at 17:24
source share

I ran into the same problem as John. TheLibzter set me on the right track, but the image, which should remain at the bottom of the sidebar, was not included. So I made some adjustments ...

Important:

  • Positioning a div containing the sidebar and content (#bodyLayout). This should be relative.
  • The positioning of the div that should remain at the bottom of the sidbar (#sidebarBottomDiv). This should be absolute.
  • Content width + sidebar width should be equal to page width (#container)

Here's the css:

  #container { margin: auto; width: 940px; } #bodyLayout { position: relative; width: 100%; padding: 0; } #header { height: 95px; background-color: blue; color: white; } #sidebar { background-color: yellow; } #sidebarTopDiv { float: left; width: 245px; color: black; } #sidebarBottomDiv { position: absolute; float: left; bottom: 0; width: 245px; height: 100px; background-color: green; color: white; } #content { float: right; min-height: 250px; width: 695px; background-color: White; } #footer { width: 940px; height: 75px; background-color: red; color: white; } .clear { clear: both; }

And here is the html:

 <div id="container"> <div id="header"> This is your header! </div> <div id="bodyLayout"> <div id="sidebar"> <div id="sidebarTopDiv"> This is your sidebar! </div> <div id="content"> This is your content!<br /> The minimum height of the content is set to 250px so the div at the bottom of the sidebar will not overlap the top part of the sidebar. </div> <div id="sidebarBottomDiv"> This is the div that will stay at the bottom of your footer! </div> <div class="clear" /> </div> </div> </div> <div id="footer"> This is your footer! </div>
+1
Oct 06 '11 at 8:25
source share

I think today flexbox will probably be used for this. See the example of the Holy Grail .

+1
Oct. 15 '13 at 20:14
source share

I understand that this is an old post, but I tried to do something for my site in order to have a sidebar. Will this work?

 #sidebar-background { position:fixed; width:250px; top:0; bottom:0; background-color:orange; } #content-background { position:fixed; right:0; top:0; bottom:0; left:250px; background-color:pink; } #sidebar { float:left; width:250px; } #content { float:left; width:600px; } <div id="sidebar-background"></div> <div id="content-background"></div> <div id="sidebar">Sidebar stuff here</div> <div id="content">Stuff in here</div>
+1
Mar 14 '14 at 0:07
source share

I think your solution would be to wrap the content container and your sidebar in the parent containing the div. Rotate the sidebar to the left and bring the background image. Create a wide range, at least the width of the sidebar of your content container. Add a float hack cleanup to make this all work.

0
Apr 26 '09 at 17:29
source share

use the background image of the body, if you use a fixed width sidebar, get the same width image as your sidebar. also add background-repeat: repeat-y to your css codes.

0
Jan 31 '14 at 11:16
source share

The position is absolute, upper: 0 and lower: 0 for the sidebar and the relative position for the contents of the shell (or container) of all elements and done!

0
Jun 25 '14 at 15:58
source share


More articles:


All Articles