3

我正在尝试在一个 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 来做会很糟糕。

提前谢谢你，丹尼尔！

4

3 回答 3

1

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

浮动具有给定宽度的#list，然后给#grid 相同的margin-left。

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

于 2012-06-28T12:01:06.800 回答
0

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

编辑

采用

position: relative;

在子元素上。

编辑 2

也许这篇文章会对你所追求的有所帮助？Div 宽度 100% 减去固定数量的像素

于 2012-06-28T11:23:19.557 回答
0

不要使用定位，使用 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 添加一个类）-在此处阅读更多内容。

于 2012-06-28T11:46:16.590 回答