Как вы наложите два div и сделаете их одинаковой высоты?

Question

Я пытаюсь сделать div контента похожим на твиттер, который рядом с ним имеет боковую панель, которая кажется наложенной. Как я могу добиться этого с помощью CSS?

Answer 1

Самый распространенный метод создания боковой панели, высота которой всегда равна высоте области содержимого, - это создание «поддельной» или искусственной боковой панели. Вот пример:

<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 будет расширяться для размещения более высокого уровня своих двух дочерних элементов, боковая панель всегда будет иметь такую ​​же высоту, что и содержимое.

Answer 2

Я предпочитаю это:

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 3

Одна техника для архивирования это называется искусственными столбцами. Посмотрите ... http://www.alistapart.com/articles/fauxcolumns/

Возможно, в противном случае вы можете работать с min-height / max-height