如何创建随页面长度动态增长的垂直分隔符

Question

我想创建一个如图所示的布局。

我正在使用twitter bootstrap 3。

我当前的空页面布局如下所示

    <jsp:include page="includes/topmenu.jsp" />

<div id="wrap">
    <div class="container">
        <div class="row">

        </div>
    </div>
</div>

<jsp:include page="includes/footer.jsp" />

现在我需要在行类中设计整个页面。

我怎样才能做到这一点？是否已经有这样的免费模板。

Answer 1

你可以在这里找到答案： http://getbootstrap.com/css/#grid 就个人而言，我会将内容划分为：

<div class="row">
<div class="col-md-3">photo</div>
<div class="col-md-6">tabs</div>
<div class="col-md-3">nothing</div>
</div>

Answer 2

A fiddle

HTML

<div class="box">Some terrible bootstrap tabs</div>

CSS

html, body {
    height: 100%;
}

.box {
    min-height: 100%;

    /* just for display purposes */
    border-right: 1px solid red;
    border-left: 1px solid blue;
    width: 50%; 
    margin: 0 auto;
}