jquery - 后伸 100% div 高度

Question

我正在使用带有多个 div 作为背景（部分）的 backstretch jquery 插件。目前我使用的是固定高度，但我希望 div 是窗口的 100% 高度并且页面是可滚动的。我怎样才能做到这一点？

HTML

<div class="main-container"></div>
<div class="main-container2"></div>
<div class="main-container3"></div>
<div class="main-container4"></div>

CSS

.main-container {
background-image:url(../images/footballfieldblur.jpg);
height:1000px;
z-index:-100;

}
.main-container2 {
background-image:url(../images/orange3.png);
height:1000px;

}
.main-container3 {
background-image:url(../images/lightbackground.jpg);
height:1000px;

}
.main-container4 {
background-image:url(../images/diamondplatebackground.jpg);
height:1000px;

}
JAVASCRIPT

<script>
$(".main-container").backstretch("images/footballfieldblur.jpg");
$(".main-container2").backstretch("images/orange3.png");
$(".main-container3").backstretch("images/lightbackground.jpg");
$(".main-container4").backstretch("images/diamondplatebackground.jpg");
</script> 

Answer 1

body{
  height:100%;
  overflow:scroll;
}

.main{
  height:100%;
}

Answer 2

这是否解决了您的问题：http: //jsfiddle.net/David_Knowles/Q3HWT/

<div class="main-container column"></div>
<div class="main-container2 column"></div>
<div class="main-container3 column"></div>
<div class="main-container4 column"></div>

html, body {position:relative; height: 100%; padding: 0; margin: 0; }
.column {position:absolute; top: 0; bottom: 0; left: 0; right: 0;}

Answer 3

您可以在 html 和正文中使用：

高度：100%；

或者

最小高度：100%

或使用 javascript：

$(".main-container").css({'height':($(document).height())+'px'});

Answer 4

只需将以下内容添加到 CSS 样式部分：

 <style>
      * { margin : 0 ;  padding : 0 ; }
 </style>

希望会有所帮助。