css - 如何使 div 的高度适应其中的绝对 div 的高度？

Question

最近我一直在为这些 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分区

当我像这样设计上传类时:

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

它可以工作，但只能在这个分辨率下工作。如果你放大，这个填充会弄乱 content (在左侧)和 upload (在右侧)。保持 margin-left 现在的样子很好，因为 upload 还剩下一些东西在任何分辨率下都需要这个最小空间的 div。

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

编辑

有那么一瞬间，我以为我明白了。

问题如果给upload属性 position: relative在我的例子中，它将所有内容推送到 upload 下方的内容中分区....

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

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

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

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

Answer 1

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

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

Sample Code