使两个并排的div可滚动

Question

我真的需要一些帮助。我花了四天时间才做到这一点，但没有运气。幸运的是，我正在寻找两个100％高度的并排div，如果添加了额外的内容，它们都会独立滚动，但如果内容少于页面高度则不会崩溃。这是我找到的解决方案。 http://jsfiddle.net/avrahamcool/58mkp/1/

    <div class="Container">
    <div class="Header">
        <h1>Header</h1>
        <p>if The Header height is not fixed, It will span excatly his needed space.</p>
        <p>The Padding/Margin between the header and the content and around the layout is optional</p>
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
                <h1>Left navigation</h1>
                <p>The width of the left navigation is not fixed.</p>
                <p>the left navigation will always span 100% height</p>
            </div>
            <div class="Content">
                <h1>Content</h1>
                <p>The Content div should always span the available Container space.</p>
                <p>If the content exceed the Content available space, it will scroll.</p>
                <p><a target="_blank" href="http://jsfiddle.net/avrahamcool/58mkp/">Here's a demo of this scenario</a></p>
                <p class="Important">This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
            </div>
        </div>
    </div>
</div>

*
{
margin: 0;
padding: 0;
}

html, body, .Container, .LeftNavigation, .Content
{
height: 100%;
}

.Container:before
{
    content: '';
    height: 100%;
    float: left;
}

.HeightTaker
{
position: relative;
z-index: 1;
}

.HeightTaker:after
{
    content: '';
    clear: both;
    display: block;
}

.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}

.LeftNavigation
{
float: left;
}
.LeftNavigation, .Content
{
overflow: auto;
}


/*For demonstration only*/
.Header
{
background-color: #bf5b5b;
text-align: center;
}

.LeftNavigation
{
background-color: #6ea364;
}
.Content
{
background-color: #66cab7;
text-align: center;
}
p
{    
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}

但这是在CSS中。可以在Bootstrap中实现同样的目的吗？为什么左侧导航宽度不变？它没有像我看到的那样设定？如果可能的话，可以通过一些更简单的代码来实现吗？我不太了解实际发生了什么。