1

简单画出情况：

是）我有的：

----------------------------------
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX    
XXXXXXXX
XXXXXXXX
----------------------------------

我想拥有的：

----------------------------------
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
----------------------------------

我不想使用display: table-cell，因为它不是跨浏览器；

我不想使用<table>任何一个（如果可能的话）。

我想学习：强制浮动块适合容器高度的技巧是什么？！

PS：我是这样尝试的（这个LESS代码不行，你可能不会太在意）

#container {
    width: 100%;
    overflow: hidden;

    div {
        float:left;
        width: 33.3%; /*only three of them. It's strange, but this is what works: 31%*/
        min-height: 100%; /*unfortunutely not works */
        height: 100%;
        background: red;
    }
}

<div id="container">
   <div><div>
   <div><div>
   <div class="last"><div>
</div>
4

3 回答 3

2

对于纯粹的无黑客解决方案，您可以将列包装在第二个容器中，如下所述：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-12-06T14:28:08.577 回答
2

在此处查看此演示：http: //jsfiddle.net/FDm9F/3/embedded/result/

如果放大，可以看到表格的高度始终为 100%

HTML

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>        
    </tr>
</table>​

CSS

html, body{
    width: 100%;
    height: 100%;
}
table{
    width: 300px;
    height: 100%;
    min-height:100%;
}
table tr td{
    width:33.3%;
    height: 100%;
    background: #F00;
    border-left: 1px solid #000;
    text-align:center
}​
于 2012-12-06T14:39:32.003 回答
1

容器有高度吗？如果没有，那可能是 100% 不工作的原因。

于 2012-12-06T14:54:49.020 回答