2011-02-06 2 views
0

У меня есть несколько плавающих элементов div, которые плавают влево. Все они имеют высоту 100%. Один из divs превышает высоту порта представления, а другие DIVs не изменяются до 100% от родительского DIV, у которого есть позиция относительного набора (как это должно работать в моем oppinion).CSS/XHTML: левые плавающие DIV с равной высотой, когда высота установлена ​​на 100%

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

Как? :)

спасибо.

ответ

1

Я не полностью соблюдаю ваш вопрос. Посмотрите на этот код:

<html> 
<body> 
<div style="height:50px;position:relative"> 
    <div style="background-color:red; float:right; height:100%">moo</div> 
    <div style="background-color:green; float:right; height:100%">boo<br/>coo<br/>doo<br/>goo<br/>boo<br/>coo<br/>doo<br/>goo</div> 
    <div style="background-color:blue; float:right; height:100%">foo</div> 
</div> 
</body> 
</html> 

Как вы можете видеть, центр DIV является имеет высоту более чем 50px, поэтому внешний DIV (с относительным положением ") растягивается, а другой внутренний -DIVs.

ли не эта работа для вас?

+0

В браузере соответствующих стандартов, ваш код не работает. Но он работает в IE ... – Nimrod

+0

Привет, он работает, если вы добавляете высоту для элементов html и body на 100%. Но проблема, которую я получаю, - это когда один из Divs расширяется из-за содержимого поверх 100% -ной настройки высоты. Я хочу, чтобы все divs были на 100% или больше, если один из них простирается дальше этого. – Francisc

2

Поправьте меня, если я ошибаюсь, но мне кажется, что вы хотите, равной высоте плавали столбцы. объяснение этому может быть довольно вовлечен, поэтому я укажу вы к нескольким примерам.

Попробуйте

http://thelucid.com/2010/12/03/the-solution-to-fluid-inconsistencies-and-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

+0

Я посмотрю на них и вернусь. :) – Francisc

+0

Спасибо, хорошо прочитал, но не проблема, которую я испытываю. – Francisc

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