Bootstrap Tutorial - Mark full height column








The following code shows how to mark full height column.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style type='text/css'>
* {<!--   w  w  w  .j  a  va  2 s. co m-->
  font-family: Tahoma;
  font-weight: 100;
  margin: 0;
}

html, body {
  height: 100%;
}

.sidebar {
  border: 1px solid #C0C0C0;
  padding: 5px;
  margin-top: 10px;
}

.main {
  border: 1px solid #C8C8C8;
  padding: 5px;
  margin-top: 10px;
  padding-top: 70px;
  padding-right: 25px;
}

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

.itemContainer {
  background-color: #F5F5F5;
}

.mainContainer {
  min-height: 100%;
  height: 100%;
  margin: 0 auto -40px;
}

.ToolItem {
  margin-right: 20px;
}

.footer, .push {
  clear: both;
  height: 30px;
}

.footer {
  margin: 5px;
  margin-top: 60px;
  padding-top: 5px;
}
</style>
</head>
<body>
  <div class="container-fluid mainContainer">
    <div class="row-fluid full-height">
      <div class="span3 sidebar itemContainer full-height">
        <h2>Heading 2</h2>
        Content
      </div>
      <div class="span9 main itemContainer full-height">
        <h2>Heading 2</h2>
      </div>
    </div>
    <div class="push"></div>
  </div>
  <footer class="footer itemContainer">
    <div class="container">
      <div class="row">
        <div class="span12">Span12</div>
      </div>
    </div>
  </footer>
</body>
</html>

Click to view the demo