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％，並添加一些內部元素以創建填充。