0

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:

  • 100% height overall
  • Fixed width (but responsive) 100% height side bar with it's own background color
  • Responsive body (right column)

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.

Community
  • 1
  • 1
dzm
  • 22,844
  • 47
  • 146
  • 226

1 Answers1

2

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

Community
  • 1
  • 1
baptme
  • 10,062
  • 3
  • 52
  • 57
  • Thanks, this is a good start. However, it doesn't work seem to be working with a fluid body. – dzm Jun 20 '12 at 17:07
  • @dave do you see how to adapt to responsive or do you want me to have a look? – baptme Jun 20 '12 at 17:32
  • @batme Well, the responsive may work, I think I have to update the styles for the different sizes. But I can't seem to get the right body to be fluid, while having the fixed side bar - if you don't mind that would be awesome! – dzm Jun 20 '12 at 20:22
  • 1
    @date Done (post edited), I assume the left sidebar lost the position:fixed property under 768px. – baptme Jun 21 '12 at 12:25
  • @batme This looks great! Although, there's no left sidebar? – dzm Jun 21 '12 at 18:20
  • @dave under 768px bootstrap-responsive.css make all the span* full width. if you keep the sidebar part of the content of your span9 will be hidden under the sidebar. by adding a padding left equivalent to the #leftmargin width +20px you can keep the sidebar http://jsfiddle.net/NzqfL/4/ – baptme Jun 21 '12 at 18:41