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：//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 に答える
2

純粋なハックフリー ソリューションの場合、ここで説明するように、列を 2 番目のコンテナーにラップできます。

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

于 2012-12-06T14:28:08.577 に答える
1

コンテナに高さはありますか？そうでない場合、それが 100% 機能しない理由である可能性があります。

于 2012-12-06T14:54:49.020 に答える