[英]backstretch 100% div height
我正在使用具有多個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>
您可以在html和body中使用:
高度:100%;
要么
最低身高:100%
或使用javascript:
$(“。main-container”)。css({'height':($(document).height())+'px'});
body{
height:100%;
overflow:scroll;
}
.main{
height:100%;
}
這能解決您的問題嗎: 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;}
只需在CSS樣式部分添加以下內容:
<style>
* { margin : 0 ; padding : 0 ; }
</style>
希望會有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.