Блог

Главная - Вопросы по программированию - Как сделать три столбца одинаковой высоты?

Как сделать три столбца одинаковой высоты?

#css

#css

Вопрос:

Я просмотрел дюжину вопросов и ответов на эту проблему, но, похоже, нет ни одного лучшего ответа для моей ситуации.

У меня есть страница (http://awesomealbums.info/?1062/chris-cornell ) с тремя вертикальными колоннами. Я хочу, чтобы столбцы имели одинаковую высоту, независимо от того, есть ли в них достаточное содержимое или нет.

Три столбца:

1) Столбец навигации слева 2) Столбец содержимого посередине 3) Столбец объявлений справа

Каковы параметры CSS / div, чтобы это произошло?

Комментарии:

1. Я не вижу трех столбцов: P

2. 1) Столбец навигации слева 2) Столбец содержимого посередине 3) Столбец объявлений справа

3. alistapart.com/articles/fauxcolumns

4. matthewjamestaylor.com/blog/…

5. matthewjamestaylor.com/blog/…

Ответ №1:

Недавно я нашел ИДЕАЛЬНОЕ решение. Однако для этого требуется использование JavaScript / jQuery. В принципе, как только страница загружена, получите естественную высоту всех разделов. Выберите наибольшую естественную высоту каждого дива. Установите все divs на эту высоту.

 <style>

body {
    font-size: .9em;
}
#ProductWrapper {
    width: 620px;   
    float: left;
}
.ProductDiv {
    width: 200px;
    float: left;
    background: rgb(240,240,240);
    margin: 1px;
    overflow: auto;
}
 
 <div id="ProductWrapper">
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf</div>
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf </div>
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf </div>
</div>
 
 <script type="text/javascript">
$(document).ready(function() {

// GET MAX NAT HEIGHT
var MaxHeight = 200;
$(".ProductDiv").each(function() {
    var Height = $(this).height();
    if (Height > MaxHeight) {
        MaxHeight = Height;  
    }
    $(this).attr("data-nat-height", Height);
});
// SET TO MAX HEIGHT
$(".ProductDiv").css("height", MaxHeight "px");

});
</script>

Комментарии:

1. Инициализация переменной maxHeight на 0 была бы еще лучше! По сути, это начальное значение будет минимальной высотой, которую вы хотите для своих столбцов.

2. @Fredy31, я пришел к тому же выводу и отредактировал свой код в реальной жизни. Спасибо!

Ответ №2:

Это старая школа, но http://www.alistapart.com/articles/fauxcolumns /

Ответ №3:

Используйте отрицательный margin’hack’.

Присвойте каждому столбцу значение нижнего поля -9999, нижнего отступа — 9999 и высоту 100%. Я не уверен, правильно ли это или нет. Но идея заключается в том, что по мере расширения одного контейнера все остальные также будут расширяться из-за 100% высоты, отступы и поля работают таким образом, что поле скрыто за пределами 100% высоты — Google для «столбцов с отрицательным полем».

Альтернативно используйте css -обсудите, чтобы увидеть все признанные в отрасли способы создания макетов из 3 столбцов, есть плавные примеры — http://css-discuss.incutio.com/wiki/Three_Column_Layouts

Комментарии:

1. Кажется, это хорошее решение сложной проблемы. Многие решения кажутся мне странными, например, таблицы, таблицы CSS, искусственные столбцы… Спасибо за лаконичность изложения.

Ответ №4:

Один из способов (поскольку ваши столбцы в любом случае имеют фиксированную ширину) — использовать позиционирование (абсолютное, если быть точным). С помощью этого метода вы можете изменить свои правила css на следующие:

 #PagePad {
    background: white;
    position: relative;
}

#Column_1_3 {
    border-left: 1px #7D7D7D SOLID;
    width: 175px;
    text-align: right;
    padding: 10px;
    background: white;
}

#Column_2_3 {
    width: 540px;
    border-left: 1px #7D7D7D SOLID;
    border-right: 1px #7D7D7D SOLID;
    float: left;
    padding: 20px;
    background: white;
    margin: 0px;
    position: absolute;
    margin-left: 196px;
    bottom: 0px;
    top: 0px;
}

#Column_3_3 {
    width: 180px;
    border-right: 1px #7D7D7D SOLID;
    background: white;
    float: left;
    text-align: center;
    margin-left: 778px;
    position: absolute;
    top: 0px;
    bottom: 0px;
}

хотя я не уверен, насколько это кроссбраузерно.

Метки: