2

我有以下问题。

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

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

我想要的是内容具有占用所有可用空间的背景（从页眉之后到页脚） 图像澄清

完整的 HTML 和 CSS（没有引导 css）代码

4

2 回答 2

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 元素。

于 2013-01-04T10:57:36.047 回答
0

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

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

于 2013-01-04T12:21:15.757 回答