Question

我有以下问题。

我正在使用Twitter引导程序来创建我的新网站，但我在后台遇到了困难。以下是我所拥有的：

<body>   
    <div class="wrapper">
        <div class="navbar navbar-inverse navbar-fixed-top">
               ...
        </div>
        <div id="header">
             ...
        </div>
        <div id="content">
             ...
        </div>
        <div class="push>
        </div>
    </div>
    <div class="footer">
         ....
    </div>
</body>

导航栏固定在顶部。（固定高度）标题（标题内容）与页面一起滚动并且是固定高度。页脚位于页面底部，但如果有更多内容（不固定在底部但固定高度），则会滚动页面

我想要的是内容有一个背景，占用所有可用空间（从标题后直到页脚） Image to clarify

Full HTML & CSS(without bootstrap css) code

Answer 1

所以你想要内容区域的页眉和页脚至少减少100％呢？

我会这样做：

演示： http://jsbin.com/ofijap/1/edit

.head {
  height:100px;
  background-color:green;
}
.wrap {
  min-height:100%;
  background-color:red;
}
.footer {
  height:100px;
  background-color:grey;
  margin-top:-100px;
}
.content {
  padding-bottom:100px;
}


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="wrap">
      <div class="head">Head</div>
    <div class="content">content</div>   
    </div>
  <div class="footer">footer</div>
</body>
</html>

编辑：

根据经验，如果你想要填充所有垂直空间的东西，它可能需要最小高度：100％;但是，它的父母也应该有100％的身高，依此类推身体元素。

Answer 2

对于想要查看我的最终结果的人：感谢@ user1721135;） http://jsbin.com/udoxet/2/edit

现在我要尝试将它移植到我自己的网站上，看看是否有效：）

Div在包含div（背景）中占据全高

2 个答案: