Daniel Daniel - 20 days ago 7
HTML Question

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

I'm trying to make following layout:



+-------------------------------------------------+
| Header + search (Twitter navbar) |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content column |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
| Footer |
+-------------------------------------------------+




Layout must take all available height & width, navigation and content columns take all available space and scroll on overflow, footer should stick to bottom.

HTML looks like this now:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/app.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="navbar">
<!-- navbar content -->
</div>

<div class="row-fluid columns">
<div class="span2 article-tree">
<!-- navigation column -->
</div>
<div class="span10 content-area">
<!-- content column -->
</div>
</div>

<div class="footer">
<!-- footer content -->
</div>
</div>
</body>
</html>


CSS:



body, html, .container-fluid { /// take all available height
height: 100%;
}

.article-tree {
color: #DCE6E5;
background: #2F323B;
}

.content-area {
overflow: auto;
height: 100%; /// explicit height to make scrolling work
}

.columns {
height: 100%; /// columns should take all height
margin-top: 42px; /// minus header
margin-bottom: 20px; // minus footer
}

.columns > div {
height: 100%; // make each column to take all available height
}

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


In theory it should work, but columns.margin doesn't work as I expect. I thought it should make height = 100% - magin, but it just moves the container.

I've googled and seen numerous questions on StackOverflow. All of them include JavaScript or position: absolute and manual positioning. IMHO they're more hacks than a solutions, I think there should be some simpler and more elegant and cross-browser way to solve this problem.

So how do I make layout described above? Maybe Bootstrap can help me (I've looked through documentation, but there are no mentions of cases like this)?

Answer

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

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

Here's the original post: http://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;
}