html - 动态插入内容后左右列高度相同

Question

我有一些html：

<div id="content">
    <div id="leftCol"></div>
    <div id="rightCol"></div>
</div>

像这样的CSS：

#content {    
    position:absolute;
    width:98%;
    margin-left:1%;
    margin-right:1%; 
    min-height: 100%;
    height: 100%;    
    padding:0;
}

#leftCol {
   position:absolute;
   min-height:100%;
   float:left;
   width:60%;
   overflow: hidden;
   border-top:1px solid #acacac;
   border-left:1px solid #dfdfdf;
   border-right:1px solid #dfdfdf;
}

#rightCol {
    float:right;
    width:40%;
    min-height:100%;
    border-right:1px solid #dfdfdf;
    border-top:1px solid #acacac;
}

将内容添加到#leftCol 时，高度 100% 仅适用于加载文档时的 100%。我有一个将内容动态插入#rightContent 的系统。

我想“同步”，所以插入内容后#leftCol 的高度相同#rightCol。纯CSS可以做到吗？我当然可以使用 js 来实现这一点，但 css 会更好:-)

Answer 1

演示

   #main {
        display: table;
        width: 500px;
    }
    #left, #right {
        display: table-cell;
        padding: 5px;
    }
    #left {
        background: none repeat scroll 0 0 red;
        width: 250px;
    }
    #right {
        background: none repeat scroll 0 0 green;
    }

Answer 2

小提琴链接与 css 和 HTML。在您的 css 文件中，您使用的是 id，但在 html 中，您正在添加类。

*{
    padding:0;
    margin:0;
    }
#content {    
    width:98%;
    margin:1% 1%;
    padding:0;
    border:1px solid #999999;
    display:table;  
}

#leftCol {
   width:58%;
   padding:1%;
   background-color:#99FFCC;
   display:table-cell;
}

#rightCol {
    width:38%;
    padding:1%;
    background-color:#CCCCCC;
    display:table-cell;
}


<div id="content">
    <div id="leftCol">
        <p>Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.</p>
    </div>
    <div id="rightCol"><p>The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.</p></div>
</div>

Answer 3

尝试这个：

#content {    
    position:absolute;
    width:98%;
    margin-left:1%;
    margin-right:1%; 
    min-height: 100%;
    height: 100%;    
    padding:0;
    display: table;
}
#leftCol {
    display: table-cell;
    width:60%;
    overflow: hidden;
    border-top:1px solid #acacac;
    border-left:1px solid #dfdfdf;
    border-right:1px solid #dfdfdf;
}

#rightCol {
    display: table-cell;
    width:40%;
    min-height:100%;
    border-right:1px solid #dfdfdf;
    border-top:1px solid #acacac;
}