100％身高，带Twitter Bootstrap和固定导航栏

Question

我将Twitter Bootstrap与固定的导航栏一起使用，因此具有以下HAML和CSS：

HAML

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

的CSS

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

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

有什么方法可以保持这种填充并仍然达到100％的身高吗？

Answer 1

您可以尝试如下操作：

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

让封闭的div的高度为100％，并添加一些内部元素以创建填充。