div 在包含的 div 中占据全高（背景）答案

【问题标题】：Div take full height in a containing div (background)div 在包含的 div 中占据全高（背景）
【发布时间】：2013-01-04 20:21:15
【问题描述】：

我有以下问题。

我正在使用 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

【问题讨论】：

标签： html sticky-footer css

【解决方案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>

编辑：

根据经验，如果你想填满所有垂直空间，它可能需要 min-height:100%;但是，它的父元素也应该有 100% 的高度，以此类推直到 body 元素。

【讨论】：

jsbin.com/ipecuc/1/edit 这是我在您的粘贴箱中得到的，但在我的 asp.net MVC4 网站中，“白色”部分并没有占据全部高度。同样在 jsbin 中，您可以获得比屏幕更多的内容。图片：sharepic.org/public/view/full/171
使用红色部分进行造型，而不是白色部分。将实际内容透明的白色部分设置为透明，使用红色元素进行样式化
那我应该如何让中间部分变白呢？但仍然在左右边缘保持红色（它们会根据屏幕大小而变化，并且会保持在 100 像素）
红色的div，设置为margin:0 100px；将其设为白色，将主体设置为红色或灰色或其他。假设100px为白色内容区域的左右边距

【解决方案2】：

致希望看到我最终结果的人：感谢@user1721135 ;) http://jsbin.com/udoxet/2/edit

现在我将尝试将其移植到我自己的网站上，看看是否可行:)

【讨论】：