基於另一個div的高度來設置div的高度

我想讓一個div（overlay）浮動到3個其他div上。它削減一點（horsebanner）和第三（頁腳）divs，並在第二（midbackground）完全。我想第二個div隨着浮動div的增加而自動增加，所以浮動div切入第三個div的數量總是保持不變。基於另一個div的高度來設置div的高度

這裏的HTML：

<body> 
    <div id="navigation"> 
    </div> 
    <div id="main"> 
     <div class="overlay"> 
     </div> 

     <div class="horsebanner"> 
     </div> 

     <div class="midbackground"> 
     </div> 

     <div class="footer"> 
     </div> 
    </div> 
</body>

這裏的CSS：

#main { 

width: auto; 
height: 650px; 
background-color: #FF6; 
margin-top: 0; 
} 

#main .horsebanner { 
width: auto; 
height: 150px; 
background-color: #F90; 
margin-top: 0; 
} 

#main .midbackground { 
width: auto; 
height: 450px; 
background-color: #CCC; 
margin-top: 0; 
} 

#main .footer { 
width: auto; 
height: 50px; 
background-color: #333; 
margin-top: 0; 
} 

#main .overlay { 
width: 300px; 
height: 100px; 
margin-left:100px; 
margin-right:100px; 
background-color:#0F0; 
position: absolute; 
}

我是新來的HTML世界，可以使用一些建議。同樣，試圖讓中背景DIV隨着疊加DIV變大而調整得更大。

來源

2013-10-12 Greg

讓我得到這個直 - 你想要的'.overlay' div的高度比中間格也比較多，和垂直吃進第一和第三的div的空間？ – Terry

也許你可以使用'overlay'div的百分比 –

我想你想讓整個事物保持一個靜態的大小，即誰曾經看過它的窗口的大小。所以基本上你必須把所有div都改成一定比例的高度，這是你想要的。

對於這個例子，我使用了26％的頂部，48％的中部和26％的頁腳。我用jquery水平居中覆蓋（我承認這有點hackey，但它基本上設置邊緣頁面上的25％，當頁面最初加載時，當您調整它...您將需要調整百分比，以不過大，你要頂欄查看）

這裏是CSS，我不停的HTML除了加入jQuery的腳本標記相同

#main { 

width: auto; 
background-color: #FF6; 
margin-top: 0; 
} 

#main .horsebanner { 
width: auto; 
height: 26%; 
background-color: blue; 
margin-top: 0; 
} 

#main .midbackground { 
width: auto; 
height: 48%; 
background-color: #CCC; 
margin-top: 0; 
} 

#main .footer { 
width: auto; 
height: 26%; 
background-color: red; 
margin-top: 0; 
} 
.overlay { 
width: 50%; 
height: 50%; 
margin-left: 25%; 
background-color:#0F0; 
position: absolute; 
}

，這就是jQuery的長相就像當你改變窗口大小時一切都保持不變。

$(document).ready(function(){ 
        $('#main').height($(this).height()); 
        $('.overlay').css('margin-top',$('body').height()/4); 
        }); 

$(window).resize(function(){ 
$('#main').height($(this).height()); 

    $('.overlay').css('margin-top',$('body').height()/4); 

});

當然和的jsfiddle http://jsfiddle.net/pc8Rs/3/

來源

2013-10-12 16:41:17 6elephants

基於另一個div的高度來設置div的高度

回答

相關問題