我正在尝试构建一个100%页面高度的并排视图。左侧是一个表格,用于显示托管在服务器上的对象。
我按照自己的意愿工作,但只要添加把手脚本行<script id="account-tpl" type="text/x-handlebars-template">
,整个页面就会开始滚动,而不只是左表。
<script id="account-tpl" type="text/x-handlebars-template">
<div class="container-fluid full-height">
<div class="row full-height">
<div class="col-md-4 list-group full-height">
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">name</h4>
<p class="list-group-item-text">description</p>
</div>
</div>
<div class="col-md-8">
<center>.col-lg-6</center>
</div>
</div>
</div>
</script>
CSS
html, body, .full-height {
height: 100%;
overflow: scroll;
}