Twitter Bootstrap Question posted in

Making the div 100% height – Twitter bootstrap

I need to make the pink div 100% browser height, height: 100vh doesn’t work right, there’s a scrollbar so it’s like 105%…

html,
body {
  width: 100%;
  height: 100%;
  color: white;
  background-color: #002B5A;
  margin: 0;
  padding: 0;
  direction: rtl;
}
#right {} #left {
  min-height: 100%;
  height: 100%;
  background-color: #CA1F4B;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="right">
  right
  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-offset-1" id="left">
    left
  </div>
</div>

Check out this Bootply

Tags:

2

Answers


  1. 0

    You need to set #right‘s height to 100%.

    #right {
    height:100%;
}

    Because #left is a child of the #right element, it is only being 100% of the parent’s height. As #right is only set to height:auto; by default, it wont be 100%.

    html,
body {
  width: 100%;
  height: 100%;
  color: white;
  background-color: #002B5A;
  margin: 0;
  padding: 0;
  direction: rtl;
}
#right { 
  height:100%;
}
#left {
  min-height: 100%;
  height: 100%;
  background-color: #CA1F4B;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="right">
  right
  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-offset-1" id="left">
    left
  </div>
</div>

    (Look at snippet in full screen)

    Bootply

    Login or Signup to reply.
  2. 0

    Try removing the min-height and changing the height to vmax, vmin or vh. 

    #left {
    height: 100vh;
    background-color: #CA1F4B;
}

    http://www.bootply.com/dGavhuGt6g#

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search