Самый простой способ получить два столбца одинаковой высоты, используя div

Question

У меня есть столбец содержимого и боковая панель.Столбец контента имеет белый фон, боковая панель имеет небольшой градиент фонового изображения.Столбец содержимого всегда длиннее боковой панели, поэтому изображение боковой панели не растягивается до нижней части.Как я всегда могу сделать столбцы содержимого и боковой панели одинаковой высоты по вертикали, используя div?

Answer 1

position: absolute часто считается плохим тоном, но можно получить столбцы одинаковой высоты, используя следующий код:

HTML:

<div id="container">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat dignissim accumsan. Aenean nisl ipsum, dictum nec dignissim ac, dictum et lacus. Aenean ac sapien egestas lacus rutrum rutrum. Etiam sit amet libero ac arcu pellentesque bibendum. Nulla dignissim imperdiet nulla, ac dictum lorem feugiat id. Proin convallis tempus commodo. Ut vitae elit velit. Duis lacinia sollicitudin justo et vehicula. Duis sed velit vitae arcu tincidunt condimentum eu eget risus. Maecenas non urna nisi.

        In ac lacinia dui. Donec lacinia, lacus fermentum ultrices iaculis, leo purus pretium velit, in rutrum est nisi sit amet mi. Curabitur nisl nunc, malesuada ac feugiat et, dignissim vel nisl. Proin ac erat in ipsum laoreet blandit nec nec tortor. Maecenas bibendum risus ac lorem pretium et dignissim lacus laoreet. Aenean suscipit porta leo ut commodo. Phasellus porttitor, nulla eget euismod pellentesque, enim sem consequat ipsum, quis interdum nunc mauris quis mauris. Proin orci est, convallis eu sodales vel, tempus a dolor. Mauris pretium faucibus tincidunt. In mauris arcu, laoreet sit amet ullamcorper sed, malesuada vel felis. Nam sollicitudin pellentesque sapien vel facilisis. Suspendisse risus dolor, tincidunt sit amet auctor nec, mollis ac nisi. Nunc sagittis libero non massa tincidunt at bibendum est pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

        Praesent ullamcorper, odio a euismod mattis, nisi arcu feugiat nisi, eu hendrerit diam augue eget diam. Nulla pellentesque sodales ante id tincidunt. Aliquam in purus vitae ante scelerisque tempor. Duis bibendum, nibh non accumsan pulvinar, lacus libero vestibulum sem, id lacinia erat nisi scelerisque mauris. Ut et tristique metus. Aenean ullamcorper vestibulum metus a laoreet. Vestibulum iaculis vestibulum elit, lobortis pharetra orci adipiscing sit amet. Integer vel molestie nulla. Morbi fringilla erat et nisi varius blandit. Pellentesque nunc ante, tempor vitae tincidunt et, rhoncus et urna.
    </div>
    <div id="sidebar">
        sidebar
    </div>
</div>

CSS:

#container
{
    width: 500px;
    position: relative;
}

#content
{
    width: 65%;
    background-color: #000;
    color: #FFF;
}

#sidebar
{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #EEE;
    width: 33%;
}

Комбинация top: 0 и bottom: 0 заставляет элемент растягиваться до его пределов (до тех пор, пока не будет объявлена ​​высота).См. jsFiddle для демонстрации.

Answer 2

Есть много разных способов сделать это.Я обнаружил, что правильное решение в значительной степени зависит от вашей архитектуры HTML.

При этом, если вам трудно работать с HTML / CSS, я могу обойтись без отчаянияиспользовать JS (в этом примере, jQuery).Я не предлагаю вам включать jQuery в ваш проект только по этой причине.Я просто предлагаю альтернативу, которую использовал ранее.

http://jsfiddle.net/zZpuU/

var h1=$('#div1').height();
var h2=$('#div2').height();

if (h1>h2)
    $('#div2').height(h1);
else
    $('#div1').height(h2);

Answer 3

Хотя это не единственный способ сделать это, мой любимый способ - использовать трюк с «искусственной колонной»: http://www.alistapart.com/articles/fauxcolumns/

Основная идея заключается в размещении градиентного фона в элементе div, который оборачивает содержимое и боковую панель. Этот div-обертка гарантированно будет таким же большим, как самый длинный DIV, поэтому ваш градиент всегда виден.