基于另一个div的高度来设置div的高度

我想让一个div（overlay）浮动到3个其他div上。它削减一点（horsebanner）和第三（页脚）divs，并在第二（midbackground）完全。我想第二个div随着浮动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变大而调整得更大。

来源

2013-10-12 Greg

让我得到这个直 - 你想要的'.overlay' div的高度比中间格也比较多，和垂直吃进第一和第三的div的空间？ – Terry

也许你可以使用'overlay'div的百分比 –

我想你想让整个事物保持一个静态的大小，即谁曾经看过它的窗口的大小。所以基本上你必须把所有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/

来源

2013-10-12 16:41:17 6elephants

基于另一个div的高度来设置div的高度

回答

相关问题