根据另一个div的高度设置div的高度

Question

我正在尝试使div（覆盖）浮动在其他3个div的上方。 它在第一个（horsebanner）和第三个（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的增大而调整得更大。

Answer 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/

根据另一个div的高度设置div的高度

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-10-12 16:41:17

根据另一个div的高度设置div的高度

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-10-12 16:41:17

解决方案1
1 已采纳 2013-10-12 16:41:17