12

I'm making a website using Bootstrap and Wordpress. It's a 2-column layout - left sidebar, right content. The right content is dynamic and expands by infinite scroll. I've tried to make the left sidebar 100% height through several techniques but to no avail.

I'd like the sidebar to continue down according to the size of the viewport/height of the right content div.

I've made a bare fiddle: http://jsfiddle.net/ydPMr/3 but it would be better if you saw what I was talking about on my dev page: http://joshuawalker.koding.com.

Here is the basic structure of my page:

<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"></div>
</div>
<div class="wire-unit hero-fix">
</div>
<div class="sidebar hidden-phone"></div>
<div class="content"></div>

If anyone has any ideas on how to make the sidebar to stretch full height, I would appreciate it.

Thanks!

kookyklavicle
  • 125
  • 1
  • 1
  • 6
  • This is a tricky thing to do. You could accomplish it using jQuery or by sticking the left sidebar inside the div that expands and set the left sidebar's height to 100% and make sure the div it's inside has the position:relative attribute. – Trevan Hetzel Dec 17 '12 at 07:29
  • You may find this answer helpful: http://stackoverflow.com/a/8741070/681807 – My Head Hurts Dec 17 '12 at 07:51
  • Thanks for your help, @ MyHeadHurts and @ TrevanHetzal. Will keep your ideas in mind for future developments. – kookyklavicle Dec 17 '12 at 23:51
  • Here's my fiddle illustrating this! https://jsfiddle.net/magickirbyz/Lyxwumxv/4/ – Tony Tai Nguyen Jan 16 '16 at 08:35

1 Answers1

24

This is working fine for me. Fiddle

I set the min-Height to 500px. If you don't want minimum, remove it. It will work according to the height of your content in the content div. Like this Fiddle

  <div class="wrapper">
    <div class="sidebar hidden-phone">
    </div>
    <div class="content">


    </div>
</div>

and style

<style type="text/css" >
    .wrapper
    {
        min-height:100%;
        width:100%;
        position:relative;
        background-color:Black;
        display:inline-block;
    }
    .sidebar
    {
        width:20%;
        top:0px;
        left:0px;
        bottom:0px;
        position:absolute;
        background-color:Aqua;
    }
    .content
    {
        min-height:500px;
        width:80%;
        position:relative;
        background-color:Gray;
        float:right;
    }
</style>
syed mohsin
  • 2,948
  • 2
  • 23
  • 47
  • Shouldn't the sidebar content go after the content area for SEO purposes? – Shoebox May 01 '14 at 22:39
  • @JiewMeng It is working in example perfectly. If it is not working kindly show your code by putting it JSFiddle – syed mohsin May 28 '14 at 13:59
  • 2
    @syedmohsin I believe that JiewMeng means that if the sidebar is larger then the content, the result is strange. http://jsfiddle.net/26y4u12k/ – Jacob Hulse Aug 25 '14 at 14:38
  • This works if your rendering a new page but if your dynamically adding things with ajax it will not. –  Mar 04 '15 at 19:59