Jquery 基于另一个div的高度设置div的高度
我试图得到一个div（覆盖）浮动超过其他3个div。它在第1个（horsebanner）和第3个（footer）div中剪切了一点，并完全覆盖了第2个（midbackground）。我希望随着浮动div的增加，第二个div的大小自动增加，以便浮动div切入第三个div的量始终保持不变 以下是html：Jquery 基于另一个div的高度设置div的高度,jquery,css,html,Jquery,Css,Html,我试图得到一个div（覆盖）浮动超过其他3个div。它在第1个（horsebanner）和第3个（footer）div中剪切了一点，并完全覆盖了第2个（midbackground）。我希望随着浮动div的增加，第二个div的大小自动增加，以便浮动div切入第三个div的量始终保持不变 以下是html： <body> <div id="navigation"> </div> <div id="main">
<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>
我是html世界的新手，需要一些建议。再次尝试使中间背景DIV随着覆盖DIV变大而调整得更大。我认为您希望整个内容保持一个静态大小，即查看其窗口的人的大小。所以基本上，你必须改变所有的div，使其达到你想要的某个百分比高度 在这个例子中，我用26%表示顶部，48%表示中间，26%表示页脚。 我使用jquery将覆盖层水平居中（我承认这有点骇人，但它基本上是在页面初始加载和调整页面大小时将页边距顶部设置为页面的25%…您需要将百分比调整为希望顶部栏看起来有多大） 这里是css，除了添加jquery脚本标记外，我保持html不变
#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;
}
$(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让我直截了当地说吧-您希望
.overlay$(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);
});