Bootstrap grid - Setting relative row height in column

Question

My layout is composed of a top menu, a main content and a footer. In the main content, I would like to take the entire page (no less, no more, so that I do not need to scroll down and I can fill up the page). In the main content, I would like to split the row via percentages and stack some elements, but I cannot.

This is my code, where I am also using a couple of Angular directives:

<body ng-app="pathfinderApp">
<app-top-menu></app-top-menu>
<div class="container-fluid">
  <div ng-view=""></div>
</div>
<app-footer></app-footer>

I defined fullheight and redefined container-fluid:

html, body {
  height: 100%;
}

.container-fluid {
  height: 90%;
}

.fullheight {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

My main contents is composed of two side-by-side blocks: one 3 columns and the other 9 columns. Let's consider only the first block (3 columns):

<div class="row fullheight"><!-- this row fills up the page-->
  <div class="col-md-3 col-sm-3"> <!-- this is still filling up the page-->
    <div class="row height20"><!-- this does not take 20% of the containing row, but less -->
      <h3 class="text-center no-margin-top">Main Action</h3>
      <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-default">
          <span>My button</span>
        </a>
      </div>
    </div>

    <div class="row height40">...</div>
    <div class="row height30">...</div>
    <div class="row height10">...</div>
  </div>
 <!-- rest of the columns -->
</div>

height classes are like this:

.height20 {
  min-height: 20%;
  height: 20%;
  max-height: 20%;
}

What I would expect is the the first row in the column be 20% of the total height, the second 40% and so on, but this does not happen. In fact, every row seems to only wraps its content and not taking the full percentage. How can I fix that?

Answer 1

When you want to apply height in %age you must have to apply height on parent container, in your case parent container is

.row.fullheight

Please apply fix height to this class like

.row.fullheight{height: 100px}

Now when you give child element(.height20) height to 20% it will take 20% form total height that is 20px, so on for other childs

Hope this would be helpful. Thanks

Bootstrap grid - Setting relative row height in column

Question

1 answers

solution1
0 2016-05-24 23:03:55

Bootstrap grid - Setting relative row height in column

Question

1 answers

solution1 0 2016-05-24 23:03:55

solution1
0 2016-05-24 23:03:55