Question

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

我想要的是：

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

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

所以基于纯CSS的答案（或者如果CSS根本不可能的Javascript）就是我在这里寻找的，而不会触及div的定位元素。

一段代码片段[原谅我，我不能在元素中写出这样嘈杂的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>

Answer 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个blahs，它将如下所示：

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

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

有意义吗？

Fiddle

快乐的编码！

Answer 2

在CSS中使用min-height代替height。（由于您尚未发布任何详细信息，我无法提供更多细节。）

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

这是粗略的fiddle

Answer 3

内部元素是否必须绝对定位？

如果没有，您可以使用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，看看我在说什么。

了解SECOND .absolute div在页面顶部的位置，而不是第二个.parent的顶部？这是因为<div>（SECOND .absolute的父级是默认position:static，因此SECOND .absolute与body / html / page绝对相对！

在您的用例中，INSIDE一个具有position:relative的元素，直接子元素在对它们使用相对/绝对时应该表现得非常相似。

使用绝对定位的内部Div来生长相对定位的Div

3 个答案:

让我解释一下：

Fiddle