CODEWITHSUNDEEP
csstwitter-bootstraphtml
Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

full height column using bootstrap

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?

Upvotes: 0

Views: 1183

Answers (3)

blurfus
blurfus

Reputation: 14031

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

Upvotes: 1

amol
amol

Reputation: 1555

Add height to html tag

html { height: 100%; }

Upvotes: 0

BBekyarov
BBekyarov

Reputation: 187

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

Upvotes: 0

Related Questions