0

I am trying to have my sidebar at full height. I am using bootstrap for my blog and here is a sample page:

http://blog-olakara.rhcloud.com/blog/2013/12/11/welcome-to-jekyll/

enter image description here

I am trying to avoid that white space at the bottom of the screen and have the blue backgound till the bottom . I tried to implement the second solution mentioned in this SO question But, it spoils the responsive nature for the webpage.

I also found some solution that recommend to modify the base of bootstrap like "row" class.. Is there a solution for bootstrap with responsive retained?

Community
  • 1
  • 1
Abdel Raoof Olakara
  • 19,223
  • 11
  • 88
  • 133

3 Answers3

1

From their sample page:

<!-- Container-->    
<div class="container-fluid">
          <div class="row">
            <!-- sidebar -->
            <div class="col-sm-3 col-md-2 sidebar">
              <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Overview</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Analytics</a></li>
                <li><a href="#">Export</a></li>
              </ul>
            </div> <!-- sidebar -->

            <!-- main pane -->
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <h1 class="page-header">Dashboard</h1>
                <p>hello world</p>
            </div> <!-- main -->
         </div> <!-- .row  -->
 </div>  <!-- .container-fluid -->

You may have to tweak some settings from their custom CSS file

blurfus
  • 13,485
  • 8
  • 55
  • 61
0

Add style="height:100%;" at your <html> tag. So it will be <html style="height:100%" class="js">

BBekyarov
  • 187
  • 2
  • 14
  • did you check if the page is still responsive after doing this fix? – Abdel Raoof Olakara Jun 30 '14 at 19:10
  • Well your topic is "full height column using bootstrap" and responsiveness is not a case which fails by adding this style. Your responsiveness is not working by default. So your website will expand by simple adding this style to the html tag as I state earlier, but your webpage is not set-up correctly to achieve full responsiveness. I can give you one tip which was causing me problems - by default bootstrap columns are 12(col-md, I mean) after certain width of the window(not sure but if less than ~756px) bootstrap remove the values from the classes – BBekyarov Jun 30 '14 at 19:40
  • For example if you have col-md-12 or col-md-6 they are respectively 100% and 50% width by default, when u reach out the milestone point your columns will have width:auto(I believe this is by default if you don't set any value to it); So keep in mind that when you use this columns that you should be using additional classes(for example colmd12 with styles width:100%;float:left; or colmd6 with styles width:50%;float:left; This is just a proposal since it will be easier to notice the columns u are using(the same like the bootstrapped once but without the dashes)) I hope i did explain something;/ – BBekyarov Jun 30 '14 at 19:43
  • Not sure exactly what you mentioned.. what I am trying to achieve is responsiveness.. I didn't say code is responsive. I believe I'm using 12 columns with a fluid container. Also, I have used "xs" elements for taking care of smaller screens. So why should I be using float:left??? – Abdel Raoof Olakara Jun 30 '14 at 20:17
  • what you are trying to achieve is responsiveness, what you are asking for is specific thing -"I am trying to avoid that white space at the bottom of the screen and have the blue backgound till the bottom", as I said your site IS NOT responsive without this, it WILL NOT become responsive after you fix it. Your site will become responsive as soon as you make it responsive. So your question is about specific thing which is not the reason for the lack of responsiveness. – BBekyarov Jul 01 '14 at 13:36
  • ok, going by you.. can you tell me how I should make my page responsive? forget the above functionality – Abdel Raoof Olakara Jul 01 '14 at 16:34
  • maybe you can give me an example through fiddle? – Abdel Raoof Olakara Jul 01 '14 at 16:36
  • I see you have fixed it, so as I said when specific milestone point is hit, bootstrap automatically remove width and float as properties from the elements with "col-md-1,2,3,4,5,6,7,8,9,10,11,12" classes, I believe from others as well but I don't have live experience with them. To avoid this you can this : your structure is body > div'container-fluid' > div'row' > div'hidden-xs col-md-2 blue sidebar' and div'col-md-10 col-md-offset-2' , which means your left div is with width : 16.6667% and it is floated on the left, the other one is with width : 83.3333% and it is floated on the left as well – BBekyarov Jul 01 '14 at 16:55
  • So to avoid issues with low resolution, you can add style to this divs(just to check how it will looks like) - on the first one (col-md-2) add the following : style="width:16.6667%;float:left" on the other one (col-md-10) add the following : style="width:83.3333%;float:left;margin-left:16.6667%;" . Note that the margin is also very important otherwise the divs will overlap themselves. – BBekyarov Jul 01 '14 at 16:58
  • So this is the standard behavior of bootstrap at extra small devices (<768px) http://getbootstrap.com/css/ , checkout their documentation. I am far away from being expert of bootstrap but this solution of mine is the only one I came up when I had pretty much the same issue. – BBekyarov Jul 01 '14 at 17:02
0

Add height to html tag

html { height: 100%; }

amol
  • 1,535
  • 9
  • 10