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

У меня есть содержимое контейнера div #, которое содержит три div внутри. Теперь, как я мог убедиться, что три div внутри имеют одинаковый рост? Конечно, я надеюсь, что высота каждого div может быть расширена в соответствии с ее содержанием. Например: вот что я пыталсяКак сделать три внутри divs одинаковой высоты?

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
    #content{background-color:#DDDDD;width:100%;overflow:auto;clear:both;height:100%;} 
    #col1{background-color:yellow;width:10%;float:left;height:100%;} 
    #col2{background-color:red;width:30%;float:left;height:100%;} 
    #col3{background-color:#AAAAAA;width:10%;float:left;;height:100%;} 
</style> 
</head> 
<body> 
<div id="content"> 
<div id="col1"> 
    <script language="javascript"> 
for(i=0;i<1000;i++){ 
document.write(i+"<br />"); 
} 
</script> 
</div> 
<div id="col2"> 
     <script language="javascript"> 
for(i=0;i<100;i++){ 
document.write(i+"<br />"); 
} 
</script> 
</div> 
<div id="col3"> 
     <script language="javascript"> 
for(i=0;i<10;i++){ 
document.write(i+"<br />"); 
} 
</script> 
</div>

источник

2009-12-07 WilliamLou

Пожалуйста, правильно отформатируйте код. Четыре отступов. –

Ну, я мог бы заботиться о фактическом размере отступов ... Но согласился, по крайней мере, дать его нам читаемым способом ... – LorenVS

Возможно, было бы лучше задать этот вопрос на doctype.com (sth вроде SO, но о html/js/...) – kubal5003

Я могу ошибаться, но я думаю, что вы либо поставить одинаковые значения высоты в дивы (или в процентах или рх) или вам нужно будет сделать какой-то скрипт (например, в JavaScript), который будет проверять высоту содержимого и устанавливать другие высоты. Я не думаю, что это выполнимо с помощью CSS. Если я ошибаюсь, я бы хотел знать ответ: P

источник

2009-12-07 23:47:54 webdreamer

Процентная высота не поддерживается широко – pstanton

Прежде всего: если у вас есть равный атрибут для разных элементов, придерживайтесь принципа DRY (не повторяйте себя) и пишите его например:

.content div{ 
    border:1px solid #404040 
}

Таким образом, вам нужно будет только изменить его в одном месте.

Теперь о вашем вопросе. Для динамической высоты я бы указал, что div должен иметь высоту 100%, поэтому они заполняют все вертикальное пространство. Это не работает с кросс-браузером, так что ищите хак, который это делает. Если вы не хотите, чтобы div заполнил содержимое div, поместите еще один div внутри div и поместите его в 3 div.

Итак:

<div id="content"> 
    <div class="innerContent"> 
     <div class="1">Lorem Ipsum</div> 
     <div class="2">Lorem Ipsum</div> 
     <div class="3">Lorem Ipsum</div> 
    </div> 
</div>

источник

2009-12-07 23:50:13

в качестве примера, который вы здесь сделали, просто добавьте высоту: 100% к .innerContent сделает все три div внутри одинаковой высоты? Я так не думаю. Конечно, в вашем примере три div имеют одинаковое содержимое. Как насчет различного содержания с разной высотой? – WilliamLou

Я знаю, что высота: 100% не работает, комбинация одного или нескольких хаков и минимальной высоты: 100%. Div с наибольшим количеством контента будет определять, насколько высок div.innerContent, и поэтому два других divs будут адаптировать их высоту к 100% и, таким образом, к тому же. –

Вы могли бы уточнить «комбинацию хаков»? – WilliamLou

Очень полезный метод для создания дивы одинаковой высоты, чтобы эмулировать с техникой под названием «Искусственные столбцы». Это была идея, впервые предложенная Дэном Сидерхольмом (вы можете read his original article here), и с тех пор развивается. Вы можете увидеть good tutorial here. Если вам это нужно в жидкостной компоновке, you might want to read this article.

В принципе, идея основана на том, что НЕ пытаемся заставить divs иметь равную высоту, но иметь обертку из трех разделов с фоновым изображением, которое имитирует фон столбцов. Этот подход работает последовательно среди всех современных браузеров (т. Е. Даже в этом контексте считается современным). Отрицательная часть состоит в том, что вам понадобится фоновое изображение, которое, по крайней мере, будет шириной, так как страница может расширяться. то есть X пикселей в ширину и 1px в высоту.

источник

2009-12-08 00:11:21 PatrikAkerstrand

Почему это downvoted? +1 ... – jeroen

Я регулярно получаю пуристы CSS за это предложение, но всякий раз, когда я сталкиваюсь с проблемой, подобной этой, для которой –, насколько я знаю – CSS просто не предлагает решение (нет, «измените свой дизайн «не в счет!) ...

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

Таблицы имеют равные вертикальные размеры легко и правильно во всех основных браузерах. Я продолжу рекомендовать их, пока CSS не предложит приемлемые решения для этих проблем.

источник

2009-12-08 00:21:14

Мне немного надоело то же самое старое недоразумение. CSS ПРЕДЛАГАЕТ РЕШЕНИЕ, это один браузер мэра, который просто не знает, как правильно обрабатывать ccc. – jeroen

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

Ну, есть разные способы решения проблемы: подделка, использование css + javascript для некоторых браузеров, использование javascript, использование таблиц и т. Д. Все они действительные решения; Я комментировал ваши замечания css, которые не правильны, а не ваше настольное решение, которое работает отлично. – jeroen

Вы можете попробовать использовать css для современных браузеров (display:table-cell, etc.), однако это не будет работать в IE6 и IE7.

Если IE6 и IE7 являются требованием (я полагаю, что это ...), вы можете включить некоторый javascript только для них, используя условные операторы, и этот javascript задает высоту всех столбцов самой высокой. Не очень красиво, но процентные значения IE6 и 7 в любом случае должны снижаться.

Кстати, решение Machine (faux columns) - это еще одно решение, которое работает для множества проектов.

источник

2009-12-08 00:37:40 jeroen

Я обещаю, что это последний комментарий, который я сделаю по этому вопросу, но я не могу устоять: это действительно потрясающе, до какой длины толпа не-столов будет идти, чтобы избежать наиболее работоспособного решения. –

Просто предлагая альтернативы, которые ранее не упоминались, возьмите свой выбор для рабочего решения ... – jeroen

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

ответ

Смежные вопросы