如何使 div 的高度适应其中的绝对 div 的高度？答案

【问题标题】：How to adapt height of a div to the height of an absolute div inside of it?如何使 div 的高度适应其中的绝对 div 的高度？
【发布时间】：2023-03-17 19:24:01
【问题描述】：

我最近在与这些 div 作斗争。例如，看下面这段代码：

<div class="container">
{
    width: auto;
    height: auto;
}
    <div class="content">
    {
        width: auto;
        height: auto;
    }
        <div class="upload">
        {
            width: 400px;
            margin-left: 600px;
            position: absolute;
        }
        </div>
    </div>

    <div class="footer>

    </div>
</div>

首先画出屏幕上的实际内容（不能画得更好）：

--------------------------------------
|               CONTAINER            |
|   _____________________________    |
|   [       CONTENT   = = = =  =]    |
|   [                 = UPLOAD =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 = = = = = ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [___________________________]    |
|   _____________________________    |
|   [          FOOTER           ]    |
|   [___________________________]    |
--------------------------------------

当upload 类的高度变大时，由于绝对定位，它会浮动到container 和content div 之外。

我需要想办法将这个container 或content 的大小调整为upload div。

当我像这样设置上传类的样式时：

position: relative;
float: right;
padding-right: 500px;

它有效，但仅在此分辨率下。如果放大，此填充会混淆content（左侧）和upload（右侧）。保持margin-left 现在的样子很好，因为upload div 的剩余部分在任何分辨率下都需要这个最小空间。

所以任何人... 有什么想法吗？

编辑

有那么一瞬间，我虽然拥有它。

如果你给upload 属性position: relative 在我的例子中，问题是它会将内容中的所有内容都推送到upload div....

所以我用position: relative; 替换了.upload，并在content 内的任何内容周围添加了一个新的div（当然upload 除外）

.insidecontent
{
float: left;
position: absolute;
top: 170px;
}

但现在content 的高度等于upload 的高度，当它小于content 或.insidecontent 的高度时，它会被截断。

很抱歉，我无法在 jsfiddle 中给出一个好的代码示例，它并没有真正显示我在网页上看到的内容。

【问题讨论】：

您的代码没有意义。您正在混淆 HTML 和 CSS
当然 HTML 和 CSS 代码是分开的。此处的代码仅供参考。
@IvanM 过去在jsfiddle
我做了，你不想看到它产生了什么哈哈

标签： css height css-position

【解决方案1】：

您可以使用相对定位，这对您有很大帮助。使用以下详细信息更新您的代码

.upload{
    width: 25%;
    position: relative;
    top: -24%;
    left: 69%;    
}

Sample Code

【讨论】：

真的没用。我在内容中的表单变成了上传 div。还是我必须将表单放在新的 div 中？
我认为最好不要使用百分比，放大或缩小页面时它会搞砸。