1

How to create two rows in a bootstrap without scrolling using one with pixel and another with percentage ? 

<div class="container-fluid">
    <div class="row main_header">
        sadf
    </div>
    <div class="row main_second">
        <div class="col-lg-2 main_left">
            test
        </div>
        <div class="col-lg-10 main_right">
           test 
        </div>
    </div>
 </div>

How to create two rows in a bootstrap without scrolling using one with pixel and another with percentage ?

    .main_header{
    height: 80px;
    background-color: #606060;
    color: #fff
}
.main_left{
    height: 100%;
    background-color: #D8D8D8;
} .main_right{
    height: 100%;
    }
.main_second{
     height: 100%;
}
ganapathy secrets
  • 63
  • 1
  • 1
  • 7
  • If you want it to be 100% of the viewport height use `vh`. So `height: 100vh`. – chRyNaN May 17 '15 at 20:37
  • still i m getting the vertical scroll bar and is there any way to solve without display:table – ganapathy secrets May 17 '15 at 20:57
  • If the content is too long for its containers height there will be a scrollbar. To prevent a scrollbar specify `overflow: hidden`. – chRyNaN May 17 '15 at 21:01
  • Also, if you want both rows to accumatively encompass the full-screen height, on the element you specify 100%, make it 100% minus the other elements height. `height : calc(100% - 80px);`. – chRyNaN May 17 '15 at 21:04
  • why .row{ margin: 0; width: 100%; width: 100vh; } doesnt view it in full width and removing 100vh in row class width is working ? – ganapathy secrets May 17 '15 at 21:19
  • For width you would use vw for viewport width. vh stands for viewport height. – chRyNaN May 17 '15 at 21:24

1 Answers1

1

I think you don't need to use any additional CSS to achieve what you want as Bootstrap already have a very established Grid System. Please see my following example in the following fiddle!

All what I have used is the following lines with Twitter Bootstrap V3.3.4:

<div class="row">
     <div class="row">
        <div class="col-sm-4" style="background-color:red;">.col-sm-4</div>
     </div>
     <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
     </div>
  </div>

And you can add any additional divs within those two divs. Learn about the Grid System very well to use this via these kind of tutorials.

And it's better to look at the following StackOverflow answer, I guess.

Community
  • 1
  • 1
Randika Vishman
  • 7,157
  • 3
  • 55
  • 75