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有可能吗？我当然可以使用j来实现这一点，但是css会更好： - ）

Answer 1

demo

   #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

试试这个：

#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;
}

Answer 3

使用css和HTML

Fiddle link。在您的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>

动态插入内容后左右相同的高度

3 个答案: