Question

我有以下情况，如图所示。灰色div是洋红色和蓝色div的父级。洋红色div与内容垂直缩放。我想蓝色div总是缩放到包含灰色div的底部。我搜索并尝试了各种组合，但都是零效果。

alt text

编辑：问题解决了！容器需要溢出：隐藏，而我想要伸展到底部的蓝色（蓝色）需要填充底部：1000px; margin-bottom：-1000; （如果需要，可以更大）

Answer 1

我通过设置父级div：

让这个工作（无论如何在Chrome中）

position: absolute;

和孩子的div：

height: 100%;

Answer 2

如果你需要IE6及更高版本的支持，答案是：你不能只用css。

有不同的解决方案来真正扩展div或只是看起来像这样：

你可以使用背景图像作为灰色div（如果你需要的是背景可以一直拉伸）
您可以使用javascript计算灰色div的高度并将其应用于蓝色div

有一个ccs选项使用非常大的填充和同样大的负边距，但我不记得它是否适用于所有浏览器，我现在找不到文章。

修改：大填充/负边距css解决方案：

文章讨论的是Firefox 1.5和Safari 2，所以我不知道它是否仍然有效，但是here it is。

Answer 3

根据我的经验，将蓝色DIV的高度设置为100％不起作用。我唯一想要的就是让蓝色DIV拥有自己的背景，为了解决这个问题，你需要让灰色DIV的背景包含其他DIV的蓝色背景。

Answer 4

执行此操作的JavaScript将是......

<div id="yourDiv" style="background-color: Blue; width: 150px;">
    Hello
</div>

<script type="text/javascript">
    var div = document.getElementById('yourDiv');

    div.style.height = document.body.clientHeight + 'px';
</script>

编辑：

检查this链接以获取不同浏览器中的clientHeight ...

Answer 5

在你的父div中，如果你在你的蓝色div上设置“float：right”并以百分比（高度：100％;）玩你的身高，我认为你应该达到你所要求的。

由于蓝色div是灰色div的子级，因此蓝色div的最大高度不应超过父div。除非我在这里遗漏了什么......

此外，如果您将右侧的蓝色div浮动，请务必将其放在标记中的洋红色div之前。

橡子

Answer 6

在html对象中设置高度100％的另一种方法是使用样式：

<html>
<head>
 <style>
     html, body { 
   height: 100%; 
}

#mydiv { 
   height: 100%; 
   background-color:red; 
}           
 </style>
</head>
<body>
<div id="mydiv">aaa</div>
</body>
</html>

Answer 7

关键是在父容器上设置一个高度。然后高度：100％工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs</title>
<style type="text/css" media="all">
#main {
    height:30em;
    width:30em;
    background-color:#999999;
    padding:1em 1em 0px 1em;
}
.inner {
    width:5em;
}
#blue {
    float:right;
    background-color:#0000FF;
    height:100%;
}
#magenta {
    float:left;
    background-color:magenta;
}
</style>
</head>
<body>
<div id="main">
    <div class="inner" id="blue">
        1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
    </div>
    <div class="inner" id="magenta">
        1<br/>2<br/>3<br/>4<br/>5<br/>6
    </div>
</div>
</body>
</html>

如何使div垂直向下垂直？

7 个答案: