2

我试图让一个 div （覆盖）漂浮在其他 3 个 div 之上。它切入了第一个（horsebanner）和第三个（页脚）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 变大而调整得更大。

4

1 回答 1

1

我认为您希望整个事物保持一个静态大小，即查看其窗口的人的大小。所以基本上你必须将所有的 div 更改为你想要的某个百分比高度。

在这个例子中，我使用了 26% 的顶部、48% 的中间和 26% 的页脚。我使用 jquery 将叠加层水平居中（我承认这有点 hackey 但它基本上在页面最初加载和调整大小时都将页边距设置为页面的 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);

});

当然还有 jsfiddle http://jsfiddle.net/pc8Rs/3/

于 2013-10-12T16:41:17.113 回答