Javascript 用绝对定位的内部Div增长相对定位的Div 我有一个相对定位的div，设置了高度和宽度然后我有一个绝对定位的div（内#1），设置了top、width和height_Javascript_Html_Css_Css Position

Javascript 用绝对定位的内部Div增长相对定位的Div 我有一个相对定位的div，设置了高度和宽度然后我有一个绝对定位的div（内#1），设置了top、width和height

javascript html css

Javascript 用绝对定位的内部Div增长相对定位的Div 我有一个相对定位的div，设置了高度和宽度然后我有一个绝对定位的div（内#1），设置了top、width和height,javascript,html,css,css-position,Javascript,Html,Css,Css Position,我想要的是：若我将内容添加到内部div（绝对定位），它应该随着内容的增长而增长，尽管它的原始高度设置是不变的如果内部div扩展，那么外部div（相对定位）div也应该扩展注意：虽然在stackoveflow.com上有其他关于从内部div移除定位的答案，但正如我所见，这对我不起作用因此，基于纯CSS（或者Javascript，如果CSS根本不可能的话）的答案是我在这里寻找的，而根本不涉及div的定位元素代码片段[对不起，我自己不能在元素中编写如此嘈杂的CSS，这是我的工具：/]。为了清

我想要的是：

若我将内容添加到内部div（绝对定位），它应该随着内容的增长而增长，尽管它的原始高度设置是不变的

如果内部div扩展，那么外部div（相对定位）div也应该扩展

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

因此，基于纯CSS（或者Javascript，如果CSS根本不可能的话）的答案是我在这里寻找的，而根本不涉及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>


新项目
标题
诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，

在CSS中使用

min height

而不是

height

。（由于您尚未发布任何详细信息，我无法提供更多细节。）

您必须使用JavaScript设置外部

的高度以匹配内部

这是一个粗略的问题，内部元素必须绝对定位吗

如果没有，可以使用

最小高度

，如下所示：

因此，

position:absolute

相对于最近的祖先，而不是

static

，这是默认状态（即在您的情况下，您的

position:relative

元素）

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

查看第二个

.absolute

div如何位于页面顶部，而不是第二个

.parent

的顶部？这是因为

（它是第二个

的父级。绝对是默认的位置：static
，因此第二个.absolute
的位置绝对相对于body/html/页面
在您的用例中，在具有位置：relative
的元素中，直接子元素在使用relative/absolute时的行为应该非常相似。
您可以通过元素中的自动高度和宽度来实现这一点，如中所示
基本上，您的内部元素将自动调整自身大小以填充其高度和宽度约束，但是您必须添加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);
    }
}

如果div的宽度仅足以容纳4个blahs，则它将如下所示：
Blah, blah, blah, blah, blah<br>
Blah, blah, blah, blah, blah

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

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

愉快的编码！
请发布您的HTML和CSS，或者创建一个JSFIDLE。内部元素是否必须绝对定位？@ddenhartog好的，这个HTML是由我正在开发的HTML表单设计器自动生成的，人们可以通过拖放将任何组件放置在页面上，创建嵌套组件，等等。如果我尝试这样做，那将是一个噩梦其他一些技巧，而不是获取元素的绝对位置并生成HTML。然后你需要使用JavaScript，因为position:absolute
会将元素从堆栈中取出。但我想你会发现绝对和相对将产生相同的结果。让我编辑我的答案以获得一些解释。你愿意使用jQuery吗？这会让事情变得更简单。哦，对了，外部容器不会扩展到包含绝对定位的内部容器。你能帮我理解吗？或者帮我修改我的示例源代码，使其按照预期的方式工作吗？没有绝对定位，可以实现这种布局吗？当然。但首先，你的样式无论如何都不会工作因为没有一个值在它们后面有px
。看看这个来看看你们定位是如何工作的，然后看看它是如何工作的。遗憾的是，chrome给了我完全相同的输出（你提到的第二个也是正确的，我将把px添加到元素中。）当然，浏览器对html/css.lol中的语法错误往往不那么严格。别担心，忘了这一点！有一些方法可以通过使用包装div和padding/margin top而不是position:top；来实现您的目的，但您当前的css
Blah, blah, blah, blah,
blah
Blah, blah, blah, blah,
blah