Question

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!

Answer 1

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>