Question

我想在div中编写一个带有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来做它会很糟糕。

提前谢谢你，丹尼尔！

Answer 1

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

以给定的宽度浮动#list，然后为#grid提供相同的margin-left。

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

Answer 2

如果要使用绝对值，则需要指定高度。然后它应该工作。

修改

使用

position: relative;

关于子元素。

编辑2

也许这篇文章可以帮助你追求的是什么？ Div width 100% minus fixed amount of pixels

Answer 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。

位置绝对但调整父级

3 个答案: