Twitter Bootstrap: Div in Container with 100% Height

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)

100% high div within a twitter bootstrap container

I /think/ I may have sorted this out, based on Pete's comments (so really this is /his/ answer.)

It seems that /every/ element down to the map container requires the tall class, and the map container itself requires "height: 100%; min-height: 600px;", something like:

html,
body {
  height: 100%;
  min-height: 100%;
}

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

#map-canvas {
...
  height: 100%;
  min-height: 600px;
}

Not sure if this is a bootstrap requirement or a google maps one.

(I did put a comment in the OP warning that I was not a CSS guru, but someone removed it. I apologise if the absence of that mislead anyone into thinking I knew what I was doing.)

Bootstrap 100% Height

You can use flex box for this.

div.wrapper {
  background:green;
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  border-bottom:1px solid black;
  flex: 0 1 100px;
}

div.main {
  flex: 1 1 auto;
}

footer {
  border-top:1px solid black;
  flex: 0 1 100px;
}

Example:
https://jsfiddle.net/tqaar3zr/2/

How to create left menu at 100% height with twitter-bootstrap 4.2?

To achieve this you need to remove the h-100 classes. That will fix the containers to 100% of the view height. Overflow will wrap below causing the behavior you are seeing.

If you set a min height, it will fill the are and expand as needed. Below is an example

html, body {  height: 100%;  min-height: 100%;}
.side-panel{  min-height: calc(100vh - 56px); /* 100% view height - 56px (navbar height) */}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">  <a class="navbar-brand" href="#">Navbar</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">    <div class="navbar-nav">      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>      <a class="nav-item nav-link" href="#">Features</a>      <a class="nav-item nav-link" href="#">Pricing</a>      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>    </div>  </div></nav>

<div class="container-fluid no-gutters pl-0">  <div class="d-flex">
    <div class="bg-dark d-none d-md-block side-panel" style="min-width: 18rem; max-width: 22rem;">            <ul class="list-group p-2">        <li class="list-group-item">          <a href="#" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Parent - Test</a>                                          <ul class="list-group collapse" id="multiCollapseExample2">              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>              <li class="list-group-item">Test</li>            </ul>                      </li>      </ul>    </div>
    <main role="main" class="flex-grow-1 pl-3 h-100">      Here is main content....    </main>      </div></div>

Twitter Bootstrap - 100% Height

I'm not so sure Bootstrap's grid model is what you're looking for here. You may instead be looking for absolute positioning. For example:

#sidebar, #content {
    position: absolute;
    top: 0;
    bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }

Try it out.

twitter bootstrap container div height

It's possible to achieve with a bit of jQuery.

HTML:

<div id="main-wrapper">
    <div id="navbar" class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>  <!-- you forgot the closing </a> -->  
                <div class="nav-collapse">
                    <ul class="nav">
                        ....
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="firstcontainer" class="container" >
        <div class="row">
            <span class="span12">
            .....
            </span> <!-- allways include a .span* in a .row -->           
        </div>
    </div>

    <div id="secondcontainer" class="container" style="background-color:#cccccc;"> <!-- this is the one I want to stretch to the bottom -->
        <div class="row">
            <div class="span12">
                <ui:insert name="body" />
            </div>
        </div>
    </div>

    <div id="push"></div>
    </div>
    <footer role="contentinfo">
       footer content
    </footer>

jQuery:

function sizing() {
  var wrapperheight=$("#main-wrapper").height();
  var navbarheight=$("#navbar").height();
  var firstcontainerheight=$("#firstcontainer").height();
  var pushheight=$("#push").height();    
  var footerheight=$("#footer").height();
  var secondcontainerheight=wrapperheight-navbarheight-firstcontainerheight-pushheight-footerheight-50;
  $("#secondcontainer").height(secondcontainerheight+"px");
}
$(document).ready(sizing);
$(window).resize(sizing);

jsFiddle:

http://jsfiddle.net/baptme/6Lghx/1/

Extra:

Always add a .span* inside a .row.
there's a sort of negative margin on a .row to compensate the left-margin off the first .span

You forgot to close the <a class="btn btn-navbar">

HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx

I've found a post here on Stackoverflow and implemented your design:

http://jsfiddle.net/bKsad/25/

Here's the original post: https://stackoverflow.com/a/5768262/1368423

Is that what you're looking for?

HTML:

<div class="container-fluid wrapper">

  <div class="row-fluid columns content"> 

    <div class="span2 article-tree">
      navigation column
    </div>

    <div class="span10 content-area">
      content column 
    </div>
  </div>

  <div class="footer">
     footer content
  </div>
</div>

CSS:

html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding: 20px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.columns {
    background-color: #C9E6FF;
    height: 100%;   
}

.content-area, .article-tree{
    background: #bada55;
    overflow:auto;
    height: 100%;
}

.footer {
    background: red;
    height: 20px;
}

Twitter Bootstrap: Div in Container with 100% Height