Как сделать две колонки с прокруткой?

Question

[Eugene Chefranov]

Подскажите, как сделать двух колоночный макет, где первая колонка как бы прибита к левому краю и занимала всю высоту (в ней будет меню), а вторая колонка занимает остальную ширину и она может прокручиваться (колонка будет с контентом). Практически как сделано на самом тостере.

Интересует реализация стандартным способом и с помощью bootstrap.

Answer 1

[Eugene Chefranov]

С помощью Bootstrap решил так:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Overview</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Analytics</a></li>
                <li><a href="#">Export</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">Content</div>
    </div>
    </div>

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}

.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
  }
  .nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
  }
  .nav-sidebar > .active > a {
    color: #fff;
    background-color: #428bca;
  }