CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
dzm
dzm

Reputation: 23544

Twitter Bootstrap Two Column Responsive Layout - Sidebar 100% height with fixed width

I'm trying to put together a layout using Bootstrap that resembles your typical OS X UI that's responsive.

It would have to do the following:

I found this thread and it partially does the job. The problem is that the side bar is not 100% height, nor is it fixed width at full view and when being 'responsive' the right side leaves a white background at the bottom, instead of filling in.

I've played around with a bunch of stuff, but can't seem to get it. Would anyone have any suggestions or know how to do this?

Thank you!

EDIT:

Just to clarify, as my question is unclear. This would be a fixed left menu with a fluid right 'body', 100% width overall.

Upvotes: 0

Views: 8977

Answers (1)

baptme
baptme

Reputation: 10092

Check this out.

<div class="row">
    <div class="span3" style="position:fixed;background-color:#46a546;height:100%;top:0px;" id="leftmargin">
        position fixed navbar (out of .container)
    </div>
</div>
<div class="container">
  <div class="row">
      <div class="span9 offset3" style="background-color:#049cdb;">
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
      </div>
  </div>
</div>

And a bit of jQuery

function sizing() {
    var windowwidth=$(window).width();
    var containerwidth=$('.container').width();
    if(windowwidth<1200) {
      var diff=windowwidth-containerwidth+40;
    }
    else {
      var diff=windowwidth-containerwidth+60; 
    }
    $('#leftmargin').text("window="+ windowwidth+",container="+containerwidth);
    if(windowwidth<=767) {
      $('#leftmargin').css('margin-left', '0px');
      $('#leftmargin').css('position', 'relative');  
    }
    else {
      $('#leftmargin').css('position', 'fixed');        
        if(diff>0) {
            $('#leftmargin').css('margin-left', (diff/2) +'px');
        } else {
            $('#leftmargin').css('margin-left', '20px');
        }
    }
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/NzqfL/3/

inspired by my previous post https://stackoverflow.com/a/10972425/1416911

Upvotes: 2

Related Questions