JSFiddle - React, Tailwind, and code Playground
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
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
html, body {
margin: 0;
padding: 0;
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;
}
JavaScript
$('<button>Clicky!</button>')
.appendTo(document.body)
.click(function() {
$('.content-area').html(
new Array(20).join($('.content-area').html())
);
})
.css({
position: 'fixed',
top: 0,
left: 0
});