使容器高度适应儿童的高度

I'm among the coutless people who are facing the same problem about adapting parent's height to the contained elements. I did some research and found similar questions, but no answer could help me, so i thought i should open a new one.

我是那些面对同样问题的无畏人物,他们将父母的身高调整到所包含的元素。我做了一些研究,发现了类似的问题,但没有答案可以帮助我,所以我想我应该开一个新的。

I already tried the suggestions given as answers here, and here, like adding "clearfix" as a class for the container div (in this case, the clearfix class is there in the Fiddle i created), adding a workaround-spacer, and so on. I don't have any floated element, thought, so maybe it's a different kind of problem.

我已经在这里尝试了作为答案给出的建议,在这里,就像添加“clearfix”作为容器div的类一样(在这种情况下,我在Fiddle中创建了clearfix类),添加了一个变通方法 - spacer,等等上。我想,我没有浮动的元素,所以也许这是一个不同的问题。

The problem still remains, in both the nested divs i have in my code (#content_wrapper doesn't adapt to #div_1 and/or div_2, while #div_2 doesn't increase its height to the contained <ul>.

问题仍然存在,在我的代码中的嵌套div中(#content_wrapper不适应#div_1和/或div_2,而#div_2不会将其高度增加到包含的

。

I really hope to find a solution (maybe it's just something wrong in my code i can't de-bug).

我真的希望找到一个解决方案(也许这只是我的代码中的错误,我无法解决)。

Thanks for your attention.

感谢您的关注。

3 个解决方案

#1

Generally speaking, you want to avoid using absolute positioning for layout purposes.

一般来说,您希望避免使用绝对定位进行布局。

What you're looking for is equal height columns. The whole point of equal height columns is that you don't need to know the height of any of the columns involved, they'll all be the same height and expand gracefully no matter what their contents are. The simplest way to achieve this is by using the table* display properties.

您正在寻找的是相等的高度列。相等高度列的整个点是你不需要知道所涉及的任何列的高度,它们都将是相同的高度并且无论它们的内容是什么都优雅地扩展。实现此目的的最简单方法是使用表* display属性。

http://jsfiddle.net/UfWJh/3/

body {
    font-size:10px;
}
/* wrappers */
 #header_wrapper {
    width:95%;
    height:40px;
    margin:auto;
    margin-top:5px;
    padding:2px;
    border:1px solid red;
}
#content_wrapper {
    display: table;
    width:95%;
    margin:auto;
    margin-top:5px;
    padding:2px;
    border:1px solid red;
}
/* div1 */
 #div_1 {
    display: table-cell;
    width:70%;
    border:1px solid purple;
}
/* div 2 */
 #div_2 {
    display: table-cell;
    width:25%;
    border:1px solid purple;
}
#div_2 ul {
    list-style-type:none;
}
#div_2 li {
    width:100px;
    height:30px;
    margin:2px;
    padding:1px;
    border:1px solid darkgrey;
}

#2

If you want a parent element to adapt to it's children you cannot explicitly define the value of the axes (width or height) that you want to adapt. Use width:auto or height:auto then use min-width,min-height,max-width & max-height to set minimum and maximum values for the adapting axis.

如果您希望父元素适应它的子元素,则无法明确定义要调整的轴(宽度或高度)的值。使用width:auto或height:auto然后使用min-width,min-height,max-width和max-height设置适配轴的最小值和最大值。

You then set values for the children, which can either be explicit values or again min and max thresholds.

然后,您可以为子项设置值,这些值可以是显式值,也可以是最小和最大阈值。

From your rather messy code, it was easy to see, you have done much of it right, but you must not understand the position options. Try to gain a better understanding of relative,absolute & fixed positioning.

从你相当混乱的代码中,很容易看出,你已经做了很多正确的事情,但你不能理解位置选项。尝试更好地了解相对,绝对和固定的定位。

I've fixed it by changing the absolute positioning to relative and fixing a missing css selector for the styles you were trying to use on the <li>'s:

我通过将绝对定位更改为相对并修复了您尝试在

上使用的样式的缺失css选择器来修复它:

/* div1 */

#div_1 { 
    position:relative; 
    width:70%; 
    top:5px; 
    left:5px; 
    border:1px solid purple; 
}


/* div 2 */

#div_2 { 
    position:relative; 
    width:25%; 
    top:5px; 
    right:5px; 
    border:1px solid purple; 
}

#div_2 ul { 
    position:relative; 
    top:0px; 
    left:0px; 
    list-style-type:none; 
}

#div_2 ul li { 
    width:100px; 
    height:30px; 
    margin:2px; 
    padding:1px; 
    border:1px solid darkgrey; 
}

I suspect you probably don't need all those fixes you tried. Also, I find code so much more readable in this format.

我怀疑你可能不需要你尝试的所有修复。此外,我发现这种格式的代码更具可读性。

#3

Here's is my answer:

这是我的答案:

Remove position absolute (it's not a good idea to implement your layout like this...not cross-browser friendly...)

删除绝对位置(这样实现你的布局不是一个好主意......不是跨浏览器友好......)

Make its content display: table

使其内容显示:表格

and then display: table-cell on the 2 divs to have even height...

然后显示:2个div上的table-cell有均匀的高度...

Here is the example:

这是一个例子:

http://jsfiddle.net/Riskbreaker/UfWJh/4/

If you do not want it this way or care about equal height then use overflow:hidden on the content wrapper and float: left the 2 divs...

如果你不想这样或关心相同的高度,那么使用overflow:隐藏在内容包装器上并浮动:离开2个div ...

Here is the example:

这是一个例子:

http://jsfiddle.net/Riskbreaker/UfWJh/7/