Bootstrap 3 - 100% Height of Custom Div Inside Column

Bootstrap 3 - 100% height of custom div inside column

The original question is about Bootstrap 3 and that supports IE8 and 9 so Flexbox would be the best option but it's not part of my answer due the lack of support, see http://caniuse.com/#feat=flexbox and toggle the IE box. Pretty bad, eh?

2 ways:

1. Display-table:
You can muck around with turning the row into a display:table and the col- into display:table-cell. It works buuuut the limitations of tables are there, among those limitations are the push and pull and offsets won't work. Plus, I don't know where you're using this -- at what breakpoint. You should make the image full width and wrap it inside another container to put the padding on there. Also, you need to figure out the design on mobile, this is for 768px and up. When I use this, I redeclare the sizes and sometimes I stick importants on them because tables take on the width of the content inside them so having the widths declared again helps this. You will need to play around. I also use a script but you have to change the less files to use it or it won't work responsively.

DEMO: http://jsbin.com/EtUBujI/2

  .row.table-row > [class*="col-"].custom {
    background-color: lightgrey;
    text-align: center;
  }


@media (min-width: 768px) {
  
  img.img-fluid {width:100%;}

  .row.table-row {display:table;width:100%;margin:0 auto;}

  .row.table-row > [class*="col-"] {
    float:none;
    float:none;
    display:table-cell;
    vertical-align:top;
  }

  .row.table-row > .col-sm-11 {
    width: 91.66666666666666%;
  }
  .row.table-row > .col-sm-10 {
    width: 83.33333333333334%;
  }
  .row.table-row > .col-sm-9 {
    width: 75%;
  }
  .row.table-row > .col-sm-8 {
    width: 66.66666666666666%;
  }
  .row.table-row > .col-sm-7 {
    width: 58.333333333333336%;
  }
  .row.table-row > .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666666666667%;
  }
  .col-sm-4 {
    width: 33.33333333333333%;
  }
  .row.table-row > .col-sm-3 {
    width: 25%;
  }
  .row.table-row > .col-sm-2 {
    width: 16.666666666666664%;
  }
  .row.table-row > .col-sm-1 {
    width: 8.333333333333332%;
  }


}

HTML

<div class="container">
    <div class="row table-row">
        <div class="col-sm-4 custom">
                100% height to make equal to ->
        </div>
        <div class="col-sm-8 image-col">
            <img src="http://placehold.it/600x400/B7AF90/FFFFFF&text=image+1" class="img-fluid">
        </div>
    </div>
</div>

2. Absolute bg div

DEMO: http://jsbin.com/aVEsUmig/2/edit

DEMO with content above and below: http://jsbin.com/aVEsUmig/3

.content {
        text-align: center;
        padding: 10px;
        background: #ccc;

}


@media (min-width:768px) { 
    .my-row {
        position: relative;
        height: 100%;
        border: 1px solid red;
        overflow: hidden;
    }
    .img-fluid {
        width: 100%
    }
    .row.my-row > [class*="col-"] {
        position: relative
    }
    .background {
        position: absolute;
        padding-top: 200%;
        left: 0;
        top: 0;
        width: 100%;
        background: #ccc;
    }
    .content {
        position: relative;
        z-index: 1;
        width: 100%;
        text-align: center;
        padding: 10px;
    }

}

HTML

<div class="container">
  
    <div class="row my-row">
      
        <div class="col-sm-6">
          
        <div class="content">
          This is inside a relative positioned z-index: 1 div
          </div>

         <div class="background"><!--empty bg-div--></div>
        </div>
      
        <div class="col-sm-6 image-col">
            <img src="http://placehold.it/200x400/777777/FFFFFF&text=image+1" class="img-fluid">
        </div>
      
    </div>
   
</div>

Bootstrap 3 two columns full height

Edit:
In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)

The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.

Bootply demo / Codepen

Markup:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Relevant) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

Bootstrap 3 Panel 100% height inside column

This can solve the problem and avoid using fixed values e.g. height: 300px.

.row-eq-height, .row-eq-height > div[class*='col-'] {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    flex:1 1 auto;}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><div class="container"><div class="row row-eq-height"><div class="col-sm-4" style="background: red">  <div class="panel panel-default"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique gravida ligula. Aliquam erat volutpat. Fusce quam erat, porttitor ac ante sed, tempus fringilla nisl. Phasellus sit amet orci volutpat, hendrerit metus vitae, dapibus nunc.   Phasellus eros mauris, iaculis quis massa vel, dictum sagittis mauris. Donec egestas sem venenatis vehicula facilisis. Mauris in ultrices augue. Etiam eros libero, malesuada nec luctus quis, aliquam nec massa. Fusce vitae hendrerit nibh, eget   hendrerit mauris. Aliquam quis sem ipsum. Phasellus aliquet rhoncus tellus ac imperdiet. Sed nec lacus at erat elementum efficitur vel in magna. Vestibulum ac enim id ligula iaculis ultricies at facilisis lorem. Nullam lobortis ultrices felis</div>  </div></div><div class="col-sm-4" style="background: green">  <div class="panel panel-default"> <div class="panel-body">Col 2</div>  </div></div><div class="col-sm-4" style="background: blue">  <div class="panel panel-default"> <div class="panel-body">Nullam nec ex metus. Curabitur mollis sem vitae augue ultrices ornare. Phasellus efficitur viverra turpis, nec scelerisque purus rutrum vel. Ut pellentesque congue tincidunt. Nulla et nulla velit. Quisque pellentesque mi ac metus faucibus pretium.   Duis sit amet vestibulum dolor.   </div> </div>  </div></div></div>

How to have a div fill the whole height of its parent column in Bootstrap

add d-flex to the column to use the default stretch behavior and have the same height. Also add w-100 to the element to keep it's default full width:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" ><div class="container-fluid">  <div class="row">    <div class="col-12 col-lg-6 order-lg-1 d-flex">      <div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>    </div>    <div class="col-12 col-lg-6 order-lg-3">      <div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>    </div>    <div class="col-12 col-lg-6 order-lg-2 d-flex">      <div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence.</div>    </div>    <div class="col-12 col-lg-6 order-lg-4">      <div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>    </div>  </div></div>

Bootstrap 3 Full width and height layout with 3 Column Flex or Col

For a full height layout, you will need to tell the parent element of the columns to get all the available height of the viewport, this can be done defining the next class:

full-height {
  height: 100vh;
}

And assigning this class to the row that wraps the columns. After this, you need to set the height property of the three columns you have to 100% (So they will use 100% height of the parent element).

Now, on small devices (SM), you want the previous layout to change: all the columns will use the 12 available grids of Bootstrap. So, you will have to manage the height of the columns with a media query like the next one (Bootstrap 3 breakpoints are documented here: Bootstrap 3 Media Queries):

@media only screen and (max-width : 992px) {

    .leftHalf {
        height: 40%;
    }

    .centerHalf {
        height: 20%;
    }

    .rightHalf {
        height: 40%;
    }
}

All of the previous explanation is used on the next working example, check it playing with the full screen mode and resizing the browser. It is a homework for you, to correct displaying the layout of the middle navbar. Hope this helps you as the base of the layout you need.

.full-height {  height: 100vh;}
.leftHalf {  background-image: url('https://via.placeholder.com/2000/FF0000/FFFFFF/?text=Left');  height: 100%;}
.centerHalf {  background-color: black;  color: white;  text-align: center;  height: 100%;}
.rightHalf {  background-image: url('https://via.placeholder.com/2000/FFFF00/00000/?text=right');  height: 100%;}
.MainBackgroundImages {  background-position: center;  background-repeat: no-repeat;  background-size: cover;}
/* Custom style for Small Devices, Tablets */@media only screen and (max-width : 992px) {
    .leftHalf {        height: 40%;    }
    .centerHalf {        height: 20%;    }
    .rightHalf {        height: 40%;    }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid"><div class="row full-height">
  <div class="col-md-5 MainBackgroundImages leftHalf"></div>
  <div class="col-md-2 centerHalf">    <div class="navbar navbar-default" id="custom-bootstrap-menu" role="navigation">      <div class="navbar-header">        <a class="navbar-brand" href="#">Ishka Sport</a>        <button class="navbar-toggle" data-target=".navbar-menubuilder" data-toggle="collapse" type="button">          <span class="sr-only">Toggle navigation</span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>        </button>      </div>      <div class="collapse navbar-collapse navbar-menubuilder">        <ul class="nav navbar-nav navbar-left">          <li><a href="/">Home</a></li>          <li><a href="/products">kayak</a></li>          <li><a href="/about-us">Nipper Boards</a></li>          <li><a href="/contact">Accessories</a></li>        </ul>      </div>    </div>  </div>
  <div class="col-md-5 MainBackgroundImages rightHalf"></div>
</div></div>

bootstrap. div 100% height of its parent element

Here's a CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden. It works well cross-browser as well

CSS

.col{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffc;
}

.col-wrap{  
    overflow: hidden;   
}

HTML

<div class="container">
    <div class="row-fluid col-wrap">
        <div class="span9 col">

            ... span content ...

        </div><!-- end span 9-->

        <div class="span3 col">

            ... span content ...

        </div><!-- end span 3-->
    </div><!-- end row-fluid -->
</div>

You can see it working at http://jsfiddle.net/panchroma/y3BhT/

Twitter Bootstrap: div in container with 100% height

Set the class .fill to height: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(I put a red background for #map so you can see it takes up 100% height)

Bootstrap 3 - 100% Height of Custom Div Inside Column