Force sidebar height 100 using CSS with a sticky bottom image

Question

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     lt body gt     lt div id  header  gt       lt div id  bannerleft  gt       lt  div gt        lt div id  bannerright  gt         lt div id  WebLinks  gt           lt span gt Web Links  lt  span gt           lt ul gt             lt li gt  lt a href     gt  lt img src        Content images MySpace 32x32 png  alt  MySpace   gt  lt  a gt  lt  li gt             lt li gt  lt a href     gt  lt img src        Content images FaceBook 32x32 png  alt  Facebook   gt  lt  a gt  lt  li gt             lt li gt  lt a href     gt  lt img src        Content images Youtube 32x32 png  alt  YouTube   gt  lt  a gt  lt  li gt           lt  ul gt         lt  div gt       lt  div gt     lt  div gt     lt div id  Sidebar  gt       lt div id  SidebarBottom  gt       lt  div gt     lt  div gt     lt div id  NavigationContainer  gt       lt ul id  Navigation  gt         lt li gt  lt a href     gt Nav lt  a gt  lt  li gt         lt li gt  lt a href     gt Nav lt  a gt  lt  li gt         lt li gt  lt a href     gt Nav lt  a gt  lt  li gt         lt li gt  lt a href     gt Nav lt  a gt  lt  li gt         lt li gt  lt a href     gt Nav lt  a gt  lt  li gt         lt li gt  lt a href     gt Nav lt  a gt  lt  li gt       lt  ul gt     lt  div gt     lt div id  Main  gt       lt  -- content -- gt     lt  div gt   lt  body gt    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

User · Answer

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

User · Answer

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

User · Answer

Try this   It forces navbar to grow as content added  and keeps main area centered       lt html gt           lt head gt               lt style gt                      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                 lt  style gt               lt script lang  javascript  gt              var i   0              function AddOne                                 for i   0 i lt 20 i                                      var node   document createElement  LI                    var textnode   document createTextNode   Water     i toString                      node appendChild textnode                   document getElementById  list   appendChild node                                                  lt  script gt           lt  head gt           lt body gt                   lt section class  sidebar  gt                       lt button id  add  onclick  AddOne    gt Add lt  button gt                       lt ul id  list  gt                           lt li gt bullshit 1 lt  li gt                       lt  ul gt                   lt  section gt                   lt section class  main  gt I m the main section  lt  section gt           lt  body gt           lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt div id    container    gt   lt div class    sidebar    gt  lt  div gt   lt div class    content    gt  lt  div gt   lt div id    footer    gt  lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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      lt div id  sidebar-background  gt  lt  div gt   lt div id  content-background  gt  lt  div gt    lt div id  sidebar  gt Sidebar stuff here lt  div gt   lt div id  content  gt Stuff in here lt  div gt

User · Answer

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   lt section class  sidebar  gt I m a sidebar  lt  section gt    lt section class  main  gt I m the main section  lt  section gt    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

User · Answer

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    lt div id  container  gt       lt div id  header  gt          This is your header       lt  div gt       lt div id  bodyLayout  gt           lt div id  sidebar  gt               lt div id  sidebarTopDiv  gt                  This is your sidebar                                  lt  div gt               lt div id  content  gt                                This is your content  lt br   gt              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               lt  div gt               lt div id  sidebarBottomDiv  gt                  This is the div that will stay at the bottom of your footer               lt  div gt               lt div class  clear    gt           lt  div gt       lt  div gt   lt  div gt   lt div id  footer  gt      This is your footer   lt  div gt

User · Answer

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

User · Answer

This worked for me   container      overflow  hidden                sidebar      margin-bottom  -5000px     any large number will do      padding-bottom  5000px

User · Answer

Flexbox  http   caniuse com  feat flexbox   First wrap the columns you want in a div or section  ex    lt div class  content  gt       lt div class  main  gt  lt  div gt       lt div class  sidebar  gt  lt  div gt   lt  div gt    Then add the following CSS    content       display  -webkit-box      display  -moz-box      display  -ms-flexbox      display  -webkit-flex      display  flex

User · Answer

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

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

Examples related to css

Examples related to sidebar

Examples related to sticky