2

2 つのフローティング div が隣り合っており、左側の div を右側のサイズに合わせて拡大したいと考えています。これはcssだけで可能ですか？

<div class="page">
    <div class="left-sidebar">
    </div>
    <div class="right-content">
    </div>
</div>

.left-sidebar
{
    background: url('ImageUrl') no-repeat right top #F8F1DB;
    float: left;
    width: 203px;
    min-height: 500px;
    height : auto;
}

.right-content
{
    background: #F8F1DB;
    margin-left: 203px;
    min-height: 477px;
}

最終的には次のようになります。

-------------------
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
-------------------

左側のサイドバー フレームには背景画像があり、コンテンツ フレームの高さに合わせて拡大する必要がありますが、それを実現するのに問題があります。

cssのみを使用して、左側のサイドバーのdivを右側のコンテンツフレームと同じ高さに伸ばすクロスブラウザの方法はありますか?

4

2 に答える 2

8

私が思いつくことができる最高のものはposition: absolute、.left-sidebar要素で使用することです:

.page {
    position: relative; /* causes the left-sidebar to position relative to this element */
}

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;  /*  this line, and the one above, confer full-height */
    left: 0;
    width: 30%;
    background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}

​.right-content {
    background-color: #f00; /* again, adjust to taste, was just to see where elements were rendered */
    margin: 0 0 0 35%; /* stops the sidebar showing 'above' the content, and gives a 5% gutter between */
}​

JS フィドルのデモ。

以下のコメントに応じて編集されました。

フローティング div の両側にヘッダーとスペースがあるため、実際に使用する上/左/下の位置がわかりません。また、右側のコンテンツ フレームが長く伸びても、左側のサイドバー フレームは伸びません (フィドルの右側のコンテンツ フレームに高さ: 500px を追加します)。

残念ながら、私が見ることができる他の唯一の代替手段は、.left-sidebar要素内で要素を移動すること.right-contentであり、その後、次のように機能します。ただし、これはユースケースでは不可能な場合があります。

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background-color: #f90;
}

.right-content {
    position: relative;
    background-color: #f00;
    margin: 0;
    padding: 0 0 0 35%;
}​

JS フィドルのデモ。

于 2012-04-26T12:59:26.523 に答える
0

ちょっと複雑な問題です。ここにそれに関する記事があります： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-04-26T12:54:11.393 に答える