Force sidebar height 100% using CSS (with a sticky bottom image)?

C

17

83

I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing. I've searched online, but nothing I have found seems to work. The HTML is:

<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 is:

* {
  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'd like the sidebar to stretch in height with the content of my page and leave the sidebar bottom image always at the bottom of the sidebar.

Circuitous answered 26/4, 2009 at 17:20 Comment(2)

Can you show your markup also please? – Keli 26/4, 2009 at 17:24

Seconded, mark-up would be a help. And would allow us to offer specific css or suggestions. – Baggett 26/4, 2009 at 17:32

R

28

UPDATE: As this answer is still getting votes both up and down, and is at the time of writing eight years old: There are probably better techniques out there now. Original answer follows below.

Clearly you are looking for the Faux columns technique :-)

By how the height-property is calculated, you can't set height: 100% inside something that has auto-height.

Radioactive answered 26/4, 2009 at 17:32 Comment(5)

Using the faux columns technique was the closest I was able to get. The problems I ran into were that I couldn't make the sidebar overlap on top of the navigation bar and I couldn't figure out how to put the "sidebar bottom" image always at the bottom of the sidebar. – Circuitous 26/4, 2009 at 17:55

If you have one main-container, in which you have the background for the entire page, you can use the sidebar-bottom-image like this: background: url(blabla) no-repeat bottom;. Making the sidebar overlap on top of the navigation bar could also be solved by "emulating" the sidebar in the nav-bar-background. If this makes no sense to you, would you stick up a sketch of what you are trying to achieve? :) – Radioactive 26/4, 2009 at 22:15

put teh sidebar bottom image in the site footer but use position relative or absolute, or neagative top margin, tp lift it up so it appears on top of the sidebar. – Apothecium 27/4, 2009 at 0:45

Answers can be expensive, affordable or cheap and this answer is cheap. – Sunderland 28/2, 2015 at 2:56

They can also be old and appropriate for their time. – Radioactive 20/10, 2015 at 6:46

A

102

This worked for me

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}

Addendum answered 9/12, 2011 at 20:44 Comment(5)

this is great, any downsides? – Wayland 29/3, 2012 at 18:35

I found a downside to this. If you try linking to a specific location inside .container using <a href="#location">, .container will scroll to that location, leaving anything above it hidden. See this: jsfiddle.net/PTvcS – you can change the overflow to auto to get a better view. – Reinold 6/2, 2013 at 23:13

i feel like I found Holy Grail. this trick is awesome, I had so much problems with sidebars back then.. – Schafer 23/4, 2013 at 23:57

In case anyone else is blind like me: Don't forget the overflow: hidden part or bad things will happen. – Jeanajeanbaptiste 26/10, 2014 at 11:55

This makes the page 5000px high, correct? Is no one else bothered by that scroll bar showing only a small fraction of the page as viewed? – Circassian 13/9, 2016 at 21:13

T

33

Until CSS's flexbox becomes more mainstream, you can always just absolutely position the sidebar, sticking it zero pixels away from the top and bottom, then set a 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 über simple way to do this but you'll find bottom does not mean "bottom of page," but "bottom of window." The sidebar will probably abrubtly end if your main content scrolls down.

Thurber answered 28/12, 2012 at 17:2 Comment(6)

Glad that worked for you, see my note about its shortcomings. – Thurber 31/12, 2012 at 14:56

But if you have a lot of content, then when you scroll down, the sidebar will not fill the full height any longer. – Anaximenes 21/1, 2014 at 8:25

Right, and I noted this at the bottom of my answer. – Thurber 21/1, 2014 at 13:10

Also, to alleviate this, you can have your content in its own absolute-positioned container, also appended to top and bottom of the window, so the page never really scrolls, only the main content div. In any case, this is still a hack. If your users support flexbox, definitely use that instead! – Thurber 7/8, 2015 at 18:7

What about the flexbox solution you mention? – Diplomatist 26/3, 2019 at 10:40

@Diplomatist There's this one: https://mcmap.net/q/241022/-force-sidebar-height-100-using-css-with-a-sticky-bottom-image – Thurber 29/3, 2019 at 22:26

R

28

UPDATE: As this answer is still getting votes both up and down, and is at the time of writing eight years old: There are probably better techniques out there now. Original answer follows below.

Clearly you are looking for the Faux columns technique :-)

By how the height-property is calculated, you can't set height: 100% inside something that has auto-height.

Radioactive answered 26/4, 2009 at 17:32 Comment(5)

Using the faux columns technique was the closest I was able to get. The problems I ran into were that I couldn't make the sidebar overlap on top of the navigation bar and I couldn't figure out how to put the "sidebar bottom" image always at the bottom of the sidebar. – Circuitous 26/4, 2009 at 17:55

If you have one main-container, in which you have the background for the entire page, you can use the sidebar-bottom-image like this: background: url(blabla) no-repeat bottom;. Making the sidebar overlap on top of the navigation bar could also be solved by "emulating" the sidebar in the nav-bar-background. If this makes no sense to you, would you stick up a sketch of what you are trying to achieve? :) – Radioactive 26/4, 2009 at 22:15

put teh sidebar bottom image in the site footer but use position relative or absolute, or neagative top margin, tp lift it up so it appears on top of the sidebar. – Apothecium 27/4, 2009 at 0:45

Answers can be expensive, affordable or cheap and this answer is cheap. – Sunderland 28/2, 2015 at 2:56

They can also be old and appropriate for their time. – Radioactive 20/10, 2015 at 6:46

M

14

I would use css tables to achieve a 100% sidebar height.

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

Give the container a display:table

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

Like 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 have modified your initial markup using the above technique (I have used background colors for the different divs so that you can see which ones are which)

Metonym answered 17/1, 2013 at 10:31 Comment(3)

Wow, this awesome - table layouts without tables! – Stringfellow 26/2, 2013 at 23:31

This is great, thank you. Many of the others above seemed to work for small content then fell apart. This one doesn't, Thanks. – Diplocardiac 29/7, 2014 at 15:19

tiny demo jsfiddle.net/n1crdy4f/1 – Mu 8/10, 2021 at 12:18

S

10

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

First wrap the columns you want in a div or section, ex:

<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;
}

Stour answered 17/9, 2015 at 21:0 Comment(2)

Looks like this is the best answer on this days. – Unilingual 15/8, 2018 at 18:11

You might also want to add flex-flow:wrap if your page elements stop wrapping – Diplomatist 26/3, 2019 at 11:7

I

5

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

I did this:

.container { 
  overflow: hidden; 
  .... 
} 

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

I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!

Great answer though, montrealmike. It worked perfectly for me.

Insomnia answered 1/2, 2014 at 18:29 Comment(0)

B

4

I have run into this issue several times on different projects, but I have found a solution that works for me. You have to use four div tags - one that contains the sidebar, the main content, and a footer.

First, style the elements in your 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 the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.

Then, simply set up your web page like this:

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

I wrote a more in-depth blog post about this 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!

Bulter answered 22/8, 2010 at 21:21 Comment(1)

Three notes: 1. You can't use the id 'footer' now in HTML 5 or 4.01 Transitional. You have to call it 'columns-footer' or something for it to show up and clear. 2. As the blog post makes clear, this doesn't actually extend the sidebar, it just puts a background behind it that looks the same. So if your sidebar is colored, you have to put in a div of that color. 3. The pixel widths screw everything up for me, but width:20% and width:80% work, if you have box-sizing:border-box turned on. – Cureall 19/2, 2013 at 7:41

E

2

Perhaps Multi-Column Layouts Climb Out of the Box is what you're looking for?

Erme answered 26/4, 2009 at 17:20 Comment(0)

M

2

i guess, today one would probably use flexbox for this. See the holy grail example.

Methacrylate answered 15/10, 2013 at 20:14 Comment(1)

You need to add more detail to your answer. Why would one use flexbox for this? – Bregma 15/10, 2013 at 20:42

P

1

I was facing the same problem as Jon. TheLibzter put me on the right track, but the image that has to stay at the bottom of the sidebar was not included. So I made some adjustments...

Important:

Positioning of the div which contains the sidebar and the content (#bodyLayout). This should be relative.
Positioning of the div that has to stay at the bottom of the sidbar (#sidebarBottomDiv). This should be absolute.
The width of the content + the width of the sidebar must be equal to the width of the page (#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's 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>

Phidippides answered 6/10, 2011 at 8:25 Comment(0)

P

1

I realise this is an old post but I was trying to work something out for my site to have a sidebar. Would 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>

Prearrange answered 14/3, 2014 at 0:7 Comment(0)

K

0

I think your solution would be to wrap your content container and your sidebar in a parent containing div. Float your sidebar to the left and give it the background image. Create a wide margin at least the width of your sidebar for your content container. Add clearing a float hack to make it all work.

Keli answered 26/4, 2009 at 17:29 Comment(0)

S

0

use body background if you are using fixed width sidebar give the same width image as your side bar. also put background-repeat:repeat-y in your css codes.

Stylography answered 31/1, 2014 at 11:16 Comment(0)

F

0

Position absolute, top:0 and bottom:0 for the sidebar and position relative for the wrapper (or container) witch content all the elements and it's done !

Fungible answered 25/6, 2014 at 15:58 Comment(0)

I

0

Try this. It forces navbar to grow as content added, and keeps main area centered.

   <html>
        <head>
            <style>
                    section.sidebar {
          width: 250px;
          min-height:100vh;
          position: sticky;
          top: 0;
          bottom: 0;
          background-color: green;
        }

        section.main { position:sticky; top:0;bottom:0;background-color: red; margin-left: 250px;min-height:100vh; }
            </style>
            <script lang="javascript">
            var i = 0;
            function AddOne()
            {
                for(i = 0;i<20;i++)
                {
                var node = document.createElement("LI");
                var textnode = document.createTextNode(' Water ' + i.toString());

                node.appendChild(textnode);
                document.getElementById("list").appendChild(node);
                }


            }
            </script>
        </head>
        <body>
                <section class="sidebar">
                    <button id="add" onclick="AddOne()">Add</button>
                    <ul id="list">
                        <li>bullshit 1</li>
                    </ul>
                </section>
                <section class="main">I'm the main section.</section>
        </body>    
    </html>

Implication answered 11/11, 2019 at 3:35 Comment(0)

M

0

this is a simplified version of danield's answer

.container {
  display: table;
  height: 260px;
}
#sidebar {
  display: table-cell;
  vertical-align: top;
  background-color:red;
  position:relative;
} 

#sidebarbottom
{
  height:30px;
  position:absolute;
  bottom:0;
}

<div class="container">
  <div id="sidebar">
    SIDEBAR HERE
    <div id="sidebarbottom">
      Sidebar Bottom
    </div>
  </div>
</div>

Mu answered 8/10, 2021 at 12:21 Comment(0)

F

0

one simple way to solve this is to use fixed position with setting the height to 100vh (equal to 100%), an example:

  aside {
  background-color: var(--main-color);
  color: white;
  position: fixed;
  width: 60px;
  height: 100vh;
  z-index: 1;
}

Floyfloyd answered 13/11, 2022 at 7:11 Comment(0)

Recommended topics

Hot tags