Question

我正在尝试建立一个网站，根据嵌套在其中的div使用以下设置来缩放内容div的高度：

<div id="content">
    <div id="col1">content</div>
    <div id="col2">content</div>
</div>

设置了CSS：

#content {
height:auto
position: relative;
}

#col1 {
width: 30%px;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}

#col2 {
width: 68%;
height: auto;
position: absolute;
right: 0px;
top: 0px;
}

然而问题是，当内容高度设置为auto时，div会折叠而不是调整其高度以适应两列中的较长列（＃col2）

防止div崩溃的唯一方法是手动编码高度而不是自动编码还是我错过了什么？

Answer 1

绝对定位的div被取出流程，因此您无法使用正在使用的CSS完成此操作。

相反，如果可能，您可以使用浮点数：

#content {
    height:auto;
    width:300px; /* some width */
    float:left;
}

#col1 {
    width: 30%;
    float:left;    
}

#col2 {
    width: 70%;
    float:right;
}

修改：请参阅HTML示例：http://jsfiddle.net/x3ebK/3/

Answer 2

你可以通过在右侧列上使用顶部和底部的绝对位置来实现它，然后当外部相对容器增长时它将增长 - 这将随左手柱自动增长：http://jsfiddle.net/x3ebK/4/ < / p>

#content {
    height:auto;
    position: relative;
    width:100%;
    float:left;
    background:#ccc;
    color:#fff;
}

#col1 {
    width: 30%;
    background:#ff0000;
}

#col2 {
    width: 70%;    
    background:#000fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0
}

使Div高度相对于第二个adsolute定位div进行调整

2 个答案: