绝对定位但调整父元素大小

Question

绝对定位但调整父元素大小

4

我正在尝试编写一个包含2个 div 的 html。其中一个父 div 没有宽度或高度.. 宽度是浏览器的宽度，高度未指定。我想在这个父 div 中放置 2 个 div：第一个需要有 250px 的宽度，第二个需要占据剩余屏幕的宽度。它们都没有高度.. 这取决于里面会有多少内容。现在我正在尝试将其制作成这样：

<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解决会很麻烦。

提前感谢您的帮助， Daniel！

- Pacuraru Daniel

1

你需要使用 position: absolute 吗？你可以只使用 position: static 和 float 来实现这个效果，父元素将保持其高度。 - My Head Hurts

我尝试了你的例子，但是我将会遇到一个问题，因为第二个 div 没有宽度大小...所以如果我在里面添加一个 div 并将其设置为父元素的 100%，它也会跟着第一个 div 下面。 - Pacuraru Daniel

我在这里创建了一个fiddle：http://jsfiddle.net/yY2wy/7/ - Pacuraru Daniel

3个回答

0

如果您要使用绝对定位，您需要指定一个高度。然后它应该可以工作了。编辑使用：

position: relative;

关于子元素。

编辑2

也许这篇文章可以帮助你找到你需要的内容？Div 宽度为100%，但减去固定像素数量

- Danny

我刚刚为它们添加了高度，但父级div仍然是0像素高度。 - Pacuraru Daniel

我刚才翻译了内容，但它消失了。 - Pacuraru Daniel

你需要它们是绝对的吗？相对位置会更容易使父级div拉伸。 - Danny

不，我不确定。如果您有任何建议，我很乐意听取。我只想让子div之一的宽度为250像素，另一个宽度占据整个屏幕，并且根据我添加的信息量而具有不同的高度。父div应该具有它们中最大的高度。 - Pacuraru Daniel

0

不要使用定位，而要使用浮动…使用您目前的方法，父级元素将会崩溃，唯一确定父级元素所需高度的方法是计算最高子元素的高度（通常需要使用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 就会根据最高的子元素来调整高度。同时记得移除 overflow 规则。

为了简洁起见，你应该考虑使用 clearfix（通过向 #calendar 添加一个类），具体请参考这里。

- Jayx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- João Paulo Macedo · Accepted Answer

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

将 #list 与其给定的宽度浮动，然后给 #grid 相同的 margin-left。

然后为了让两列看起来像父容器的高度都是100％，你需要一张图片。以前你必须使用“实际图像”。今天，您可以仅依赖于用于背景的css3渐变，使您的页面加载更快（少一个http请求的图像）。它可能看起来更复杂，但实际上并不是“那么”复杂。它甚至最终会给您带来更多的灵活性，因为您可以更改列的宽度和颜色，而无需创建新图像。您所需要的就是更改CSS。