使用绝对定位的内部 Div 增长相对定位的 Div答案

【问题标题】：Grow a Relatively positioned Div with an Absolutely positioned inner Div使用绝对定位的内部 Div 增长相对定位的 Div
【发布时间】：2014-02-11 07:46:33
【问题描述】：

我有一个相对定位的 div，设置了高度和宽度。
然后我有一个绝对定位的 div（在 #1 内），设置了顶部、宽度、高度。

我想要的是：

如果我将内容添加到内部 div（绝对定位），它应该与内容一起增长，尽管它设置了原始高度。
如果内部 div 扩展，那么外部 div（相对定位）也应该扩展。

注意：虽然 stackoveflow.com 上还有其他关于从内部 div 中删除定位的答案。如我所见，这对我不起作用。

因此，我在这里寻找一个基于纯 CSS（或 Javascript，如果 CSS 根本不可能的话）的答案，而无需触及 div 的定位元素。

代码 sn-p [对不起，我不能自己在元素中编写如此嘈杂的 CSS，这是我的工具：/]。为了清楚起见，我按原样发布代码：

<html>
<head>
    <title>New Project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="background-color: lightgray">
    <div id="34ef9e8e-7d99-4690-8788-d2caf23cf33e" style="position: relative; clear: both; margin: 0 auto; top:5; left: 5; height: 300; width: 500; font-family: Arial; font-face: Arial; font-size: 12; font-weight: normal; font-style: normal; ; color:#000000; background-color:#ffffff">
        <div id="f79e1b12-d4bb-433b-9e2c-33a3c1b2b89a" style="position: absolute; clear: both; border: 1px solid #000000; top:46; left: 97; height: 200; width: 300; font-family: Arial; font-face: Arial; font-size: 12; font-weight: normal; font-style: normal; ; color:#000000; background-color:#ffffff">
            <div style=" background-color: #000000; color: #ffffff; line-height:24px; width: 100%; height: 24px"><span style="padding-left: 2px">Title</span></div>
            <div style="position: relative;">
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
                Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

请发布您的 HTML 和 CSS，或创建一个 jsfiddle。
内部元素是否必须绝对定位？
@ddenhartog 好吧，这个 html 是由我正在开发的 HTML 表单设计器自动生成的，人们可以通过拖放将任何组件放置在页面上，创建嵌套组件等等。如果我尝试做一些其他技巧而不是获取元素的绝对定位并生成 HTML，那将是一场噩梦。
那么你需要使用 JavaScript，因为position:absolute 将元素从堆栈中取出。但我想你会发现绝对和相对会产生相同的结果。让我编辑我的答案以获得一些解释。
你愿意使用 jQuery 吗？这会让事情变得容易得多。

标签： javascript html css css-position

【解决方案1】：

您可以在元素中使用自动高度和宽度来做到这一点，如 this fiddle 中所示。

基本上，您的内部元素会自动调整大小以填充其高度和宽度限制，但您必须添加 javascript/jquery 来检查元素的高度并确保它仍然适合父元素：

function checkHeight()
{
    var extra = $("#inner").height() + parseInt($("#inner").css("top"));
    if($("#outer").height() < extra)
    {
        $("#outer").height(extra);
    }
}

function checkWidth()
{
    var extra = $("#inner").width() + parseInt($("#inner").css("left"));
    if($("#outer").width() < extra)
    {
        $("#outer").width(extra);
    }
}

如果内部元素的高度加上内部元素的top 大于外部元素的高度，则将外部元素的高度设置为该总和。

这对于高度非常有效，但是对于宽度有一点需要注意。 如果您希望内部元素比最大的内联元素更宽，则必须将其设置为更大。

文本，例如在单词周围是内联的，因此除非您设置内部元素的宽度以适应文本的宽度，否则它将自动换行。

让我解释一下：

假设我的内部 div 的内容是这样的：

Blah, blah, blah, blah, blah<br>
Blah, blah, blah, blah, blah

如果 div 的宽度只够容纳 4 个 blah，它看起来像这样：

Blah, blah, blah, blah,
blah
Blah, blah, blah, blah,
blah

因此，要解决此问题并获得代码所示的预期结果，您必须将 div 的宽度设置为与所有五个 blah 的宽度相同或更大。

有意义吗？

Fiddle

编码愉快！

【讨论】：

第一件事：我根本不担心宽度。只是身高。现在它也是一个由计时器触发的java脚本解决方案。是的，在我的情况下，即使内容会随着 javascript 触发器而增长（如果用户单击按钮，表将获得更多行），所以在这种情况下，我需要增长当前包含的 div，然后它是父级，依此类推，直到我到达最上面的 div。这是正确的吗？
如果所有的内部div都没有设置height属性或者设置为auto，你只需要设置最外面的内部div的高度。如果不是，那么你的假设是正确的。

【解决方案2】：

内部元素必须绝对定位吗？

如果没有，您可以使用min-height，如JSFiddle：

.parent{
    position:relative;
    min-height:300px;
    width:300px;
    padding: 30px 0;
    background-color:red;
}
.child{
    position:relative;
    left: 100px;
    min-height: 200px;
    width:100px;
    background-color:yellow;
}

所以position:absolute 与不是static 的最近祖先相对，这是默认状态（即在您的情况下，您的position:relative 元素。

看看这个JSFiddle，看看我在说什么。

看看第二个.absolute div 是如何位于页面顶部而不是第二个.parent 的顶部？那是因为<div>（它是第二个.absolute的父级是默认position:static，所以第二个.absolute绝对相对于body/html/page定位！

在您的用例中，在具有 position:relative 的元素内，直接子元素在对它们使用相对/绝对时的行为应该非常相似。

【讨论】：

你能帮我理解一下吗？或者一个好处可能是修改我的示例源以按预期运行？没有绝对定位能实现这样的布局吗？
当然。但首先，您的样式无论如何都不会起作用，因为在它们之后没有px 的值。看看这个JSFiddle，看看你们的定位是如何不起作用的，然后看看这个JSFiddle是怎么做的。
遗憾的是，chrome 给了我完全相同的输出（你提到的第二个也是正确的，我将 px 添加到元素中。）。当然，浏览器对 html/css 中的语法错误往往不那么严格。
哈哈。没关系，忘记那个！有一些方法可以通过使用包装器 DIV 和 padding/margin-top 而不是 position:top; 来做你想做的事，但是你当前的 CSS 样式和 HTML 结构不支持只使用 CSS 来做这件事。
那么 padding-top 成功了吗？ :) 因为当我尝试自己时，我把头发拉到顶部会使内部 div 溢出父 div ...

【解决方案3】：

在您的 CSS 中使用 min-height 而不是 height。（由于您没有发布任何细节，我无法提供更多细节。）

您必须使用 JavaScript 设置外部 <div> 的高度以匹配内部高度。

这是一个粗略的fiddle

【讨论】：

哦，对了，外部容器不会扩展到包含绝对定位的内部容器。