2

テーブルセル、固定高さ、またはJavascriptを使用せずに、高さが互いに一致する2つの列を持つ方法はありますか?

テーブルの使用

<table>
    <tr>
        <td style="background:#F00;">
            This is a column
        </td>
        <td style="background:#FF0;">
            This is a column<br />
            That isn't the same<br />
            height at the other<br />
            yet the background<br />
            still works
        </td>
    </tr>
</table>

DIV の使用

<div style="float:left;background:#F00" >
    This is a column
</div>
<div style="float:left;background:#FF0" >
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>
<div style="clear:both;" ></div>

目標は、どちらの側が高いかに関係なく、両方の背景を完全な高さに拡張することです。

両側が正しい高さであることを保証しないため、一方を他方にネストしても機能しません。

残念ながら、プレビューでは動作する HTML が示されていましたが、実際の投稿ではそれが取り除かれていました。これを HTML ファイルに貼り付ければ、私の言いたいことがわかるはずです。

4

7 に答える 7

3

http://www.xs4all.nl/~peterned/examples/csslayout1.html

これはあなたが望むようなものです。両方の高さを 100% にすると (この CSS トリックを使用)、含まれている div の高さまで伸びます!

編集：言及するのを忘れて、それらをコンテナdivに入れてください！

編集：

<html>
<head>
    <style>
        html, body
        {
            margin: 0;
            padding: 0;
            height: 100%; /* needed for container min-height */
        }
        #container
        {
            background-color: #333333;
            width: 500px;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne, #colTwo
        {
            width: 250px;
            float: left;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne
        {
            background-color: #cccccc;
        }
        #colTwo
        {
            background-color: #f4f5f3;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="colOne">
            this is something</div>
        <div id="colTwo">
            this is also something</div>
        <div style="clear: both;">
        </div>
    </div>
</body>
</html>
于 2008-12-02T21:53:52.257 に答える
2

この問題を解決するには、 Faux Column CSS 手法を使用します。

以下を考えると：

<div class="contentSidebarPair">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

次のスタイルを使用できます。

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
   #FFF is the bgcolor of your content */
div.contentSidebarPair {
    background: #FFF url('sidebar.gif') repeat-y top left;
    width: 800px;
    margin: 0 auto; /* center */
    zoom: 1; /* For IE */
}

/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.sidebar {
    float: left;
    width: 200px;
}

div.content {
    float: left;
    width: 600px;
}

そこには！シンプルで効果的。JavaScript はまったく関係ありません。さらに複雑なレイアウト (リキッド レイアウト) を作成したい場合は、background-position を使用してこの手法を適応させることができます。チュートリアルはこちらから入手できます。

于 2009-06-26T01:42:07.573 に答える
2

誰もこれを言わなかったという理由だけで、多くの場合、人々は偶数列の存在を偽って、外側のコンテナーの底までずっとタイル張りの背景画像を持っています。

これにより、一方が他方より前に終わっていても、コンテンツが 2 つの等しい列にあるように見えます。

于 2008-12-03T04:01:51.267 に答える
0

はい、可能です-純粋なCSSであり、ハッキングはありません-同じ高さの列。

この記事をチェックしてください-それは非常によく書かれています。

于 2009-08-07T08:19:09.907 に答える
0

CSS2.1 をサポートするブラウザー (IE8 以降、その他すべての主要なブラウザー) を扱っている場合は簡単です。これがマークアップの場合:

<div>
    This is a column
</div>
<div>
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>

これはあなたのCSSになります：

div { display: table-cell; }

レイアウトに複数の行が必要な場合は、そこにいくつかのラッパー要素を追加する必要がありますが、それ以外の場合はそのまま機能します。

于 2011-07-11T14:29:37.627 に答える
0 
display:inline-block

トリックを使えば、IE でも動作します。

<div><span>
    col1
</span></div>
<div><span>
    col2
</span></div>

div {display:inline;}
span {display:inline-block;}
于 2008-12-02T23:57:51.600 に答える
-2

巧妙な HTML と CSS を使用してこれを実現する簡単な方法があります。

最初の HTML:

<div id="container">
    <div id="col1">
        this is column 1
    </div>
    <div id="col2">
        this is column 2<br />
        it is obviously longer than the first column <br />
        YEP!
    </div>
</div>

clear:両方の意味不明な div がないことに注意してください。

今CSS：

#container { background:#f0f; overflow:hidden; width:400px; }
#col1, #col2 { float:left; width:50%; }
#col2 { background:#ff0; }

コンテナー ルールに隠されているオーバーフローにより、コンテナーは、含まれているフローティング div のサイズまで確実に拡張されます (そして、誰もが大好きな非セマティックなクリア div を取り除きます)。

コンテナーの背景は、最初の列に適用されます。col2 div の背景は、2 番目の div にのみ適用されます。これにより、両方の div が常に同じ高さであるという錯覚が生じます。

3 行の CSS によるシンプルでセマンティックなソリューション。楽しみ

編集：投票する理由についてコメントしてください。そうでない場合、私の答えが間違っている理由を推測する必要があります。この場合、コンテナに width プロパティを追加するのを忘れていたので、IE6/7 で適切に動作します。上記の改訂された CSS を確認してください。

于 2008-12-02T23:32:11.497 に答える