1

私はちょっと何かに行き詰まっています... 私は#right同じ高さになろうとしています#leftが、#right流動的です. どうすればこれを行うことができますか？

 #container {
    width: 960px;
    margin: 0 auto;
}

#left {
    background: #ccc;
    float: left;
    padding: 10px;
    width: 160px;
}

#right {
    background: #ccc;
    float: right;
    padding: 10px;
    width: 750px;
}

-

<div id="container">
    <div id="left">
        test
    </div>

    <div id="right">
        test
    </div>
</div>

ありがとう。

4

2 に答える 2

1

これを行うには、100% の高さをシミュレートする背景画像を適用します#left。

HTML

<div id="container">
    <div id="left">
        test
    </div>

    <div id="right">
        test<br />test
    </div>​
</div>

CSS

#container {
    width: 960px;
    margin: 0 auto;
    background: url(http://www.dummyimage.com/180x1/ccc/ccc.png) repeat-y;
    overflow:hidden;
}

#left {
    background: #ccc;
    float: left;
    padding: 10px;
    width: 160px;
    height: 100%;
}

#right {
    background: #ccc;
    float: right;
    padding: 10px;
    width: 750px;
    height; 100%;
}​

ライブデモ: http://jsfiddle.net/TqKMW/
このトリックの詳細: http://www.alistapart.com/articles/fauxcolumns/

于 2012-06-13T08:08:34.333 に答える
0

padding-bottom:10000px;margin-bottom:-10000px;各列とoverflow:hidden;ラッパーに追加するだけです（例）：

<div id="container">
    <div id="left">
        test<br>test
    </div>

    <div id="right">
        test
    </div>
</div>

#container {
    width: 960px;
    margin: 0 auto;
    overflow:hidden;
}

#left {
    background: #ccc;
    float: left;
    padding: 10px;
    width: 160px;
    padding-bottom:10000px; /* Taller than tallest possible column */
    margin-bottom:-10000px; /* Negative version of #left{padding-bottom} */
}

#right {
    background: #ccc;
    float: right;
    padding: 10px;
    width: 750px;
    padding-bottom:10000px; /* Same as #left{padding-bottom} */
    margin-bottom:-10000px; /* Negative version of #left{padding-bottom} */
}

注:これは一部の古いブラウザーでは機能しない可能性があるため、サポートが必要なブラウザーで機能することを確認してください。

于 2012-07-10T16:24:37.683 に答える