100% 车身高度，带 Twitter Bootstrap 和固定导航栏答案

【问题标题】：100% Body Height w/ Twitter Bootstrap & Fixed Navbar100% 车身高度，带 Twitter Bootstrap 和固定导航栏
【发布时间】：2012-11-13 11:36:53
【问题描述】：

我正在使用带有固定导航栏的 Twitter Bootstrap，所以我有以下 HAML 和 CSS：

HAML

%html
  %body
    %header
      .navbar
        ...
    #main-wrapper
      .container
    %footer

CSS

body { 
  padding-top: 60px 
  height: 100%;
}

问题在于，这会创建一个比页面高度大 60 像素的正文，因此我在页面上总是有一个滚动条，即使它不需要显示内容。我需要 60px 的填充，以便响应行为正常工作。

有什么方法可以保持这种填充，并且仍然达到 100% 的体高？

【问题讨论】：

不要使用高度：100%。你不需要。在他的主页twitter.github.com/bootstrap 中采用引导方法（使用开发工具检查主体）。如果您为此激活 .css，正文将响应您需要的响应式 Web 设计

【解决方案1】：

你可以试试这样的：

<body>
  <div style='height: 100%; background:blue;'>
    <div style='height: 60px; background:red;'>
    </div>
  </div>
</body>

让封闭的 div 有 100% 的高度，并添加一些内部元素来创建填充。

【讨论】：