100% height using bootstrap not working

Question

i'm trying to do 2 columns in bootstrap with both being 100% height. On the right column is bascially going to be a div with a background-image and should be full height. I set the div and the container to 100% height but nothing happens. If i place text in the div, then i see the background image peek through. What am i doing wrong? here's part of the code:

<div class="container-responsive" id="content"><div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">

  </div>

  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="v-image-1" style="background-image: url('images/target.jpg');"></div>

  </div>  

</div>


html, body, #content {
  height:100%;
  overflow-x:hidden;
}

.v-image-1 {
  min-height:100%;
  background-size:cover;
}

Any and all help greatly appreciated!

Whenever you set `height: 100%`, always ask yourself _100% height of what?_. So you want height 100% of what? height comes from content or static set heights, which you have neither. — zgood, Apr 19 '18 at 20:53

Bonnie · Accepted Answer · 2018-04-19T20:51:22.150

1

Try adding a height to your row as well as to .col-lg-6. The columns aren't expanding since they seemed to be constrained by the row not having a height:

.row { height: 100%; }
.col-lg-6 { height: 100%; }

html, body, #content {
  height:100%;
  overflow-x:hidden;
}

.row {
  height: 100%;
}

.v-image-1 {
  min-height:100%;
  background-size:cover;
}

.col-lg-6 {
  border: solid 1px red;
  height: 100%;
}

<div class="container-responsive" id="content"><div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">

  </div>

  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="v-image-1" style="background-image: url('http://placekitten.com/200/300');"></div>
  </div>  

</div>

edited Apr 19 '18 at 20:51

answered Apr 19 '18 at 20:44

Bonnie

611
8
25

i did... that didn't change anything – Damien Apr 19 '18 at 20:45
I forgot, I also had to add a height to .container-responsive. I'll edit my original response. Seems to be working here: https://codepen.io/bonniemellott/pen/qYEvjv – Bonnie Apr 19 '18 at 20:46
but that's already there in #content {height:100%;} – Damien Apr 19 '18 at 20:48
@BonnieMellott its working in your codepen because you set `html, body { height: 100%; }`. Remove that to see what I mean – zgood Apr 19 '18 at 20:50
The OP also needs to add the height to .col-lg-6. – Bonnie Apr 19 '18 at 20:50
finally had the chance to try this out... everything worked great! thanks! – Damien Apr 23 '18 at 13:53

100% height using bootstrap not working

1 Answers1