Question

我试图得到一个div（叠加）浮动超过3个其他div。它在第一（马匹）和第三（页脚）divs以及完全在第二（midbackground）上切入一点点。我希望第二个div在浮动div增加时自动增加大小，以便浮动div切入第3个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，我保持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/

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

1 个答案: