如何使 div 一直垂直向下缩放？答案

【问题标题】：How to make div scale vertically all the way down?如何使 div 一直垂直向下缩放？
【发布时间】：2010-11-07 02:46:29
【问题描述】：

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

编辑：问题解决了！容器需要一个overflow: hidden，而我要拉伸到底部的div（蓝色）需要padding-bottom: 1000px;边距底部：-1000；（或更大，如果你需要）

【问题讨论】：

标签： html css

【解决方案1】：

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

有不同的解决方案可以真正缩放 div 或让它看起来像这样：

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

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

编辑：大填充/负边距css解决方案：

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

【讨论】：

我记得那个负边距很大的解决方案 - 我以前用过一次，但是看在上帝的份上，我不记得确切的实现细节，也找不到在线！

【解决方案2】：

执行此操作的 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...

【讨论】：

javascript 不是一个选项的任何特殊原因？如果你有 jquery 可用，你可以做类似 var graydiv = $("#greydivselector").height(); $("#bluedivselector").height(greydiv);你可以玩弄偏移量。想法？
我同意，为什么 JavaScript 不是一个选项？可能是一个更简单的解决方案。

【解决方案3】：

在您的父 div 内部，如果您在蓝色 div 上设置“float:right”并以百分比（高度：100%；）来调整您的身高，我认为您应该实现您的要求。

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

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

橡子

【讨论】：

不要忘记指定父项的高度，否则浮动项不会“留在”父项内

【解决方案4】：

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

【讨论】：

aka faux column - 我试图避免这种情况，因为在我当前的设置中，我需要添加另一个 div 容器......如果没有其他内容出现，我会这样做。谢谢。

【解决方案5】：

另一种在 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>

【讨论】：

要使子对象以 100% 的高度工作，父对象必须具有固定高度
我确实粘贴了您的 HTML。它没有很好地涵盖这个问题。
可能是因为我没有在正文中定义边距，尝试放在 height:100%, margin: 0 0 0 0 之后；在正文 css 中

【解决方案6】：

关键是要在父容器上设置高度。然后 height: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】：

我通过设置父级的 div 使其工作（无论如何在 Chrome 中）：

position: absolute;

和孩子的div：

height: 100%;

【讨论】：