Div在包含div的全高（背景）

我正在使用twitter bootstrap来创建我的新网站，但我对背景有困难。以下是我拥有的：

<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

来源

2013-01-04 Cpt_superfly

所以，你要的内容区域要少至少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％的身高，等等等等。

来源

2013-01-04 10:57:36 user1721135

HTTP ：//jsbin.com/ipecuc/1/edit这就是我在你的粘贴bin中得到的，但是在我的asp.net MVC4网站中，它并没有把“白色”部分的全部高度。同样在jsbin中，你可以获得比屏幕更多的内容。图片：http：//www.sharepic.org/public/view/full/171 –

使用红色部分造型，而不是白色部分。设置实际内容透明的白色部分，使用红色元素进行造型 – user1721135

，那么我应该如何让中心部分变成白色呢？但仍保持左右边缘的红色（它们对于屏幕大小是可变的，并且将保持为100px） –

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

现在我要去尝试，并将其移植到自己的网站，看看是否能工程:)

来源

2013-01-04 12:21:15

Div在包含div的全高（背景）

回答

相关问题