Question

我正在尝试创建一个延伸到窗口底部的div，以便div内容的任何溢出都会触发滚动。我在网上查看了如何在窗口底部进行div伸展，并且所有内容都说html和body都有height: 100%;。我已经这样做了，但它仍然无效。相关代码如下：

HTML：

<script type="text/x-handlebars">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
      </div>
    </div>
  </div>

  {{outlet}}
</script>

<script type="text/x-handlebars" id="tasks">
  <div class="tasklist row-fluid span8 offset2">
    <table class="table table-bordered table-hover">
      {{#each model}}
        {{partial 'tasks/taskListElement'}}
      {{/each}}
    </table>
  </div>
</script>

的CSS：

html, body {height: 100%;}

.tasklist {
  height: 100%;
  overflow: scroll;
}

Answer 1

您已将div.tasklist包含在可能存在问题的script标记内，它获得其父级的100％高度，即script#tasks。 <script>有自己的风格，请尝试在script#tasks

上应用100％的高度

Answer 2

您是否附加了重置css文件？如果没有，某些浏览器会添加边距或填充作为默认值，因此您最终会有间隙。这是一个链接。

http://meyerweb.com/eric/tools/css/reset/

即使HTML和身体高度为100％，Div也不会将高度拉伸到窗口底部

2 个答案: