我正试着让一个div（overlay）浮在其他3个div的上面。它在第一个div（horsebanner）和第三个div（footer）上剪了一点，完全在第二个div（midbackground）上。我希望第二个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变大而调整得更大。
最佳答案
我想你希望整件事都保持一个静态的尺寸，也就是说，看窗户的人的尺寸。所以基本上你必须把所有的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;
}
这就是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);
});
当然，jsfiddlehttp://jsfiddle.net/pc8Rs/3/