css - 2つのdivをオーバーレイして、同じ高さにするにはどうすればよいですか？

Question

ツイッターに似たコンテンツdivを作成しようとしています。その横には、オーバーレイされているように見えるサイドバーがあります。cssを使用してこれを達成するにはどうすればよいですか？

Answer 1

私はこれを好みます：

HTML:

<div class="surround">
    <div class="main">
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
    </div>
    <div class="side">
        /* allways the same height like main */
    </div>
</div>

CSS:

.surround
{
    display: table;
    width:900px;
    min-height:200px;
}

.main{
    display:table-cell;
    width:600px;
    min-height:200px;
    background-color:blue;
}
.side{
    display:table-cell;
    width:300px;
    min-height:200px;
    background-color:red;
}

Answer 2

これをアーカイブする 1 つの手法は、フェイク カラムと呼ばれます。見てみましょう... http://www.alistapart.com/articles/fauxcolumns/

それ以外の場合は、min-height/max-height で作業できます

Answer 3

コンテンツ領域と常に同じ高さのサイドバーを作成する最も一般的な方法は、本質的に「偽の」または偽のサイドバーを作成することです。次に例を示します。

<div id="wrapper">

     <div id="content">
          <p>My Content</p>
     </div>

     <div id="sidebar">
          <p>Sidebar</p>
     </div>

</div>

スタイルシートは次のようになります。

#wrapper {
     background: url(faux_sidebar.jpg) top right repeat-y;
}

#sidebar {
     float:right;
     width:200px;
}

画像 faux_sidebar.jpg は、サイドバーと同じ幅になります (パディングのために少し幅が広いかもしれません)。#wrapper の背景は、サイドバーの背景である画像であるという考え方です。その後、サイドバーは通常のようにコンテンツの横にフローティングします。#wrapper はその 2 つの子の背の高い方に合わせて拡張されるため、サイドバーは常にコンテンツと同じ高さになります。