1

我正在尝试创建一个网站，该网站将使用以下设置根据嵌套在其中的 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;
}

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

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

4

2 回答 2

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/

于 2013-06-05T15:46:30.217 回答
0

您可以通过在右侧列上使用绝对位置将其放在顶部和底部来做到这一点，然后当外部相对容器增长时它会增长 - 它将随着左侧列自动增长：http: //jsfiddle.net/x3ebK /4/

#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
}
于 2013-06-05T16:04:38.933 回答