4

I have no idea how to do this, essentially I want the columns to touch from top of div to bottom of div when said div has a min-height of 100%. But this does not work:

html, body {
  height: 100%;
}

body {
  max-width: 1500px;
  margin: 0 auto;
}

#wrapper {
  min-height: 100%;
  overflow: auto;
}

.container {
  min-height: 100%;
  overflow: auto;
}

.container .row .col-md-6 {
  min-height: 100%;
}

The wrapper extends to the bottom of the page, but the container div does not. It only extends to the end of the content contained with in.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
</head>

<body>
    <div id="wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
        </div> 
    </div>
</body>
</html>

Is there something I am missing? The body and html go 100%, the wrapper goes 100% of that and then the container doesn't go 100% ... why?

TheWebs
  • 12,470
  • 30
  • 107
  • 211
  • possible duplicate of [Bootstrap 3 - 100% height of custom div inside column](http://stackoverflow.com/questions/20773342/bootstrap-3-100-height-of-custom-div-inside-column) – Ashesh May 27 '15 at 10:47

4 Answers4

2

You missed one. And you should use height instead of min-height

(Demo)

.row {
    height: 100%;
}
1

If include position:absolute; that will do it. But using absolute will place the second div on top of the first div. As in your sample you have two divs side by side. doing it this way you will also need to add col-md-offset-6 to have both divs display clearly.

<div id="wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-6 bg-primary"></div>
                <div class="col-md-6 bg-info col-md-offset-6"></div>
            </div>
        </div> 
</div>

The css would be...

.container .row .col-md-6 {
  position: absolute;  
  height: 100%;
  overflow: auto;  
}
AngularJR
  • 2,752
  • 2
  • 16
  • 19
1

To have this display as you wanted or expected, it looks like you need to include the html and the body. I hope this Fiddle will help.

I use just the height:100vh; rather than height:100%; .

Does this help.

html,body {
  height:100vh;  
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 00px;  
}
/*
#wrapper {
  height: 100%;
  overflow: auto;
}
*/   
.container .row .col-md-6 { 
  height: 100vh;
  overflow: auto;  
}
AngularJR
  • 2,752
  • 2
  • 16
  • 19
-2

You need to add the min-height to ALL elements(parents). In this case you are missing the row element.

victorsxbr
  • 64
  • 5