2

我是在使父母的高度适应包含的元素方面面临同样问题的无知的人之一。我做了一些研究，发现了类似的问题，但没有答案可以帮助我，所以我想我应该开一个新的。

我已经尝试过这里和这里作为答案给出的建议，比如添加“clearfix”作为容器 div 的类（在这种情况下，clearfix 类在我创建的 Fiddle中），添加一个workaround-spacer，等等在。我没有任何浮动元素，我想，所以也许这是一个不同的问题。

问题仍然存在，在我的代码中的两个嵌套 div 中（#content_wrapper不适应#div_1和/或div_2，#div_2而不会将其高度增加到包含的<ul>.

我真的希望找到一个解决方案（也许只是我的代码有问题，我无法调试）。

感谢您的关注。

4

3 回答 3

1

如果您希望父元素适应它的子元素，则不能明确定义要适应的轴（宽度或高度）的值。使用width:auto或height:auto然后使用min-width, min-height, max-width&max-height来设置适应轴的最小值和最大值。

然后，您为子项设置值，这些值可以是显式值，也可以是min阈max值。

从你相当凌乱的代码中，很容易看出，你做了很多正确的事情，但你一定不理解这些position选项。尝试更好地理解relative, absolute&fixed定位。

我已通过将绝对定位更改为相对并为您尝试在<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; 
}

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

于 2013-06-12T17:36:03.707 回答
1

一般来说，您希望避免将绝对定位用于布局目的。

您正在寻找的是等高的列。等高列的全部意义在于您不需要知道所涉及的任何列的高度，它们都将具有相同的高度并且无论它们的内容是什么都可以优雅地扩展。实现这一点的最简单方法是使用table * 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;
}
于 2013-06-12T17:50:33.140 回答
1

这是我的答案：

删除绝对位置（这样实现布局不是一个好主意……不适合跨浏览器……）

制作它的内容display: table

然后display: table-cell在 2 个 div 上获得均匀的高度......

这是示例：

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

如果您不希望这样或关心相等的高度，请在内容包装器上使用溢出：隐藏并浮动：离开2 个 div...

这是示例：

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

于 2013-06-12T17:53:21.443 回答