绝对定位但调整父级大小

Posted 2023-03-06

【中文标题】绝对定位但调整父级大小

【英文标题】：position absolute but resize parent

【发布时间】：2012-06-29 21:45:14

【问题描述】：

我正在尝试编写一个 div 中包含 2 个 div 的 html。 有一个没有宽度或高度的父div。宽度是浏览器宽度，高度没有指定。 我想在这个父 div 中，有 2 个 div：第一个需要有一个宽度或 250 像素，第二个需要有屏幕的其余宽度。他们都缺少高度..取决于里面有多少内容。 现在我试图让它像这样：

<div id="calendar">
        <section id="list">
        </section>

        <section id="grid">
        </section>
</div>

还有这样的css：

#calendar 
    margin: 0 auto;
    position: relative;
    overflow: hidden;

#calendar #list 
    background: #f00;
    position: absolute;
    width: 250px;
    left: 0;
    top: 0;

#calendar #grid 
    background: #0f0;
    position: absolute;
    left: 250px;
    top: 0;
    right: 0;

现在的问题是，当我将内容添加到子 div 时，父 div 不会调整大小

我希望有一个使用 CSS 的解决方法来解决这个问题，因为通过 JS 来做会很糟糕。

提前谢谢你， 丹尼尔！

【问题讨论】：

你需要使用position: absolute吗？您可以使用 position: static 和 float 来实现这一点，并且父级将保持其高度

我试过你的例子，我会有一个问题，因为第二个 div 没有宽度大小..所以如果我在里面添加一个 div 并将其设置为父级的 100%，它将也进入第一个 div 下

我在这里做了 1 个小提琴 jsfiddle.net/yY2wy/7

【参考方案1】：

这是我的解决方案 -> http://tinkerbin.com/Z8mJmItU

以给定的宽度浮动#list，然后给#grid同样的margin-left。

然后，要使两列看起来都具有父容器高度的 100%，您需要一个图像。在您必须使用“实际图像”之前。今天，您可以简单地依靠 css3 渐变作为背景，使您的页面加载速度更快（减少 1 个对图像的 http 请求）。它可能看起来更复杂，但实际上并不“那么”复杂。它甚至最终为您提供了更大的灵活性，因为您可以更改列的宽度和颜色，而无需创建新图像。您只需要更改 css。

【讨论】：

根据您的想法和一些小改动，我已经做出了我想要实现的目标：D 我使用了子 div 上的相对位置并使用了 margin-left: 250px;而是离开：250px，它就像一个魅力.. 非常感谢 JOPLOmacedo 的帮助，并感谢主题中的每个人！

【参考方案2】：

如果要使用绝对高度，则需要指定高度。那么它应该可以工作了。

编辑

使用

position: relative;

在子元素上。

编辑 2

也许这篇文章对你所追求的有所帮助？ Div width 100% minus fixed amount of pixels

【讨论】：

我现在给它们添加了一个高度，而父 div 仍然是 0 px 高度

我刚做了，内容消失了

你需要它们是绝对的吗？相对会更容易使父 div 伸展。

不，如果您对他们有任何建议，我不知道 .. 我只希望子 div 成为其中 1 个 250px 宽度和屏幕宽度的其他其余部分，并具有不同的高度，具体取决于如何我在其中添加了很多信息 .. 以及父 div 的高度是其中最大的一个

【参考方案3】：

不要使用定位，使用 float ... 使用您当前的方法，父级将折叠，确定父级所需高度的唯一方法是计算最高子元素的高度（通常，使用javascript）。

<div id="calendar">
        <section id="list">
        </section>

        <section id="grid">
        </section>
        <div class="clear"></div>
</div>

... 和 CSS ...

#calendar 
    margin: 0 auto;
    position: relative;

#calendar #list 
    background: #f00;
    float:left;
    width: 250px;

#calendar #grid 
    background: #0f0;
    margin-left: 250px;

.clear
    clear:both;

这样#calendar 将调整高度以适应最高的子元素。还要记得去掉溢出规则。

...为了简洁起见，您可能应该考虑使用 clearfix（通过向#calendar 添加一个类）-read more here。