Question

我想要一个用DIV创建的表，这个表有2个固定的列（没关系），但是这两列必须始终具有相同的高度。

可在此处找到代码：Code on Fiddle

代码：

<style type="text/css">     
    #container 
    { 
        position:relative; 
        width:100%; 
        margin:0 auto; 
    } 

    #header { 
        background-color:#5a7fa9; 
    } 

    #center { 
        overflow:hidden; 
        width:100%;         
    } 

    #left { 
        float:left; 
        width:200px; 
        background-color:Gray;
    } 

    #content { 
        margin-left:200px; 
        background-color:#a9bbd1; 
    } 

    #footer { 
        background-color:#95adc9; 
    } 
</style> 

<div id="container"> 
    <div id="header">header</div> 

    <div id="center"> 
        <div id="left">left</div> 
        <div id="content">content<br/><br/></div> 
    </div> 

    <div id="footer">footer</div> 
</div>

Answer 1

是一个例子

http://jsfiddle.net/amkrtchyan/dLeWA/9/

Answer 2

你可以使用这个脏黑客（只添加这个css）：

#center > div {
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

另请参阅更新的example。

=== UPDATE ===

我会试着解释一下：
padding-bottom使用background-color。它必须是高度值（最低和最高列之间的最小不同高度）。因此center-div中的每一列都在底部添加背景颜色。负margin-bottom将高度设置回真实高度。（即使最小高度不够大，整个内容也是可见的。）

Answer 3

您好我想解释Howdy_McGee给出的答案..

将min-height: 100px添加到#center

将height: 100%添加到#left

将height: 100%添加到content

他解释了上述完全正确的变化。

在jiddle中看到你的代码你没有在你的css风格的任何地方写过高度。因此，所有容器都会根据内容将height:auto带入其中。

你有div id='center'这个div应该有一些最小高度：100px;并且内部容器都应该height:100%，center div中的元素将占据其父级的高度。

我更倾向于您提供min-height:100px，因为如果您在内部框中添加动态内容height会自动增加，因此如果您的div中没有任何内容{{1将坚持height。

希望我的解释有意义，因为我有点急于打字。

使用div创建表，2个固定列始终具有相同的高度

3 个答案: