CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
TheWebs
TheWebs

Reputation: 12923

Make bootstrap column touch the bottom of the div

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?

Upvotes: 4

Views: 11072

Answers (4)

AngularJR
AngularJR

Reputation: 2762

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;  
}

Upvotes: 1

AngularJR
AngularJR

Reputation: 2762

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;  
}

Upvotes: 1

victorsxbr
victorsxbr

Reputation: 64

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

Upvotes: -2

user4639281
user4639281

Reputation:

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

(Demo)

.row {
    height: 100%;
}

Upvotes: 2

Related Questions