Handlebars在2列视图中导致Bootstrap表滚动整个页面而不仅仅是表格

时间:2015-06-03 02:54:28

标签: html css twitter-bootstrap handlebars.js

抱歉,如果这个问题令人困惑,我几天前就开始学习HTML和CSS了。

我正在尝试构建一个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;
}

0 个答案:

没有答案