CODEWITHSUNDEEP
css
odedta
odedta

Reputation: 2478

Making the div 100% height

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

Upvotes: 0

Views: 146

Answers (2)

Michelle Ashwini
Michelle Ashwini

Reputation: 918

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#

Upvotes: 0

Albzi
Albzi

Reputation: 15619

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

Upvotes: 4

Related Questions