Twitter Bootstrap Question posted in

How to fit columns height into body with Bootstrap? – Twitter bootstrap

i’m looking for a solution to fit the columns of Twitter Bootstrap into the Body. Like the example below. Is there a robust way to do it? Because if i’m trying it with height:100% or position absolute (and top:0, bottom:0, etc.) it doesn’t work as expected (or i have a scrollbar).

So how can i fit the col’s into the body height, but on mobile (col-xs-…) to fallback to the “normal” bootstrap usage?

Thanks a lot!

  Desktop view

  +---------------------------+---------------------+
  |         LOGO ETC          |    OTHER STUFF      |
  |         Height: ~20%      |    Height: ~20%     |
  +---------------------------+---------------------+
  |            |                                    |
  |            |                                    |
  | Navigation |         Content                    |
  |    80%     |           80%                      |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+



  Mobile View:

  +---------------------------+
  |         LOGO ETC          |
  +---------------------------+
  |         OTHER STUFF       |
  +---------------------------+
  |                           |
  |         Navigation        |
  |                           |
  +---------------------------+
  |                           |
  |         Content           |
  |                           |
  |                           |
  +---------------------------+
Tags:

4

Answers


  1. 0

    Since there isn’t any code coming up from you, here is a little example of how it could work.

    https://jsfiddle.net/hwp9qw34/

    You can simply add some customized media-queries to your divs. Another approach to deal with that would be the usage of Bootstraps .visible-*-* and .hidden-*-* classes. But note: This would totally end up in bloating up your html and redundant markup which would lead to a slow(er) performance.

    Login or Signup to reply.
  2. 0 
    <div class="col-xs-12 col-md-12">

   <div class="row">
       <div class="col-xs-12 col-md-6">logo</div>
       <div class="col-xs-12 col-md-6">other stuff</div>         
   </div>

   <div class="row">
       <div class="col-xs-12 col-md-4">navigation</div>
       <div class="col-xs-12 col-md-8">content</div>         
   </div> 


</div>
    Login or Signup to reply.
  3. 0

    You can see here in my bin. If you look on snippet just make a full screen view.

    .divs{
  background:blue;
  border: 1px solid #000;
  min-height:100px;
  color:#fff;
}
    <!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class='container'>
    <div class="text-center col-sm-6 col-md-6 col-lg-6 divs">
  logo
    </div>
    <div class="text-center col-sm-6 col-lg-6 divs">
  other stuff
    </div>
    <div class="text-center col-sm-12 col-md-3 col-lg-3 divs">
  nav
    </div>
    <div class="text-center col-sm-12 col-md-9 col-lg-9 divs">
  content
    </div>
  </div>

</body>
</html>
    Login or Signup to reply.
  4. 0

    Click Full page to view your desktop view.

    You have to set the height of the body(parent of the div) to have the height in % of the div to work and in turn set the height of the html (parent of body).

    div {
  border: 1px solid black;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.div1,
.div2 {
  height: 40%;
}
.div3,
.div4 {
  height: 60%;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="div1 col-xs-12 col-md-6">div1</div>
<div class="div2 col-xs-12 col-md-6">div2</div>
<div class="div3 col-xs-12 col-md-3">div3</div>
<div class="div4 col-xs-12 col-md-9">div4</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search