Розтягніть внутрішній двій, щоб відповідати контейнер змінної висоти. Неможливо?

Мені подобається думати, що я непоганий ... ну, прохідний ... веб-розробник. Я створив, ймовірно, ... IDK, 50 веб-сайтів, з хорошою кількістю Flash і Javascript, а також декілька додатків, захищених базою даних, і зробив достатньо графічного дизайну, щоб мати можливість грамотно підробити це :)

Я пережив цю проблему півдюжини разів у своїй кар'єрі: як ви встановите внутрішній розділ до 100% висоти вмісту div, коли висота контейнера змінна? Я знаю, що ви можете зробити це за допомогою Javascript або використовувати штучні стовпці, але я клянусь собакою, якщо неможливо це зробити за допомогою чистого HTML/CSS, я буду дуже розчарований у житті і W3C :(

Here be the mockup matey: http://random.siliconrockstar.com/heightTest/

Див, внутрішній розділ #content натискає #container вниз. Я хочу, щоб рожева частина #shadow була такою ж висотою, як #content. Звичайний випадок, коли я стикаюся з цією проблемою, - це дизайнери, які нічого не знають про розробку веб-сайтів і використовують багато тіней, що падають; просто прикинься, що рожева частина - це краплячка, яка мені потрібна, щоб поширити правий край #content.

Зверніть увагу: так, я знаю, що тепер ви можете робити падіння з CSS, навіть в IE з деякими хаками, але в цьому випадку у мене проблеми дизайну, що перешкоджають мені це зробити.

Це неможливо без Javascript? :(

1

5 Відповіді

Якщо в IE6 немає теми, ви можете зробити це:

#shadow{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  background: #F69;
}
2
додано
Ти надзвичайний. Не працює в моєму XP/IE7 VM, але мені все одно, він працює в IE8 + :)
додано Автор siliconrockstar, джерело

Я думаю, що, може, новий матеріал css3 допоможе з цим: наприклад,

.container { display: box; box-align: stretch; box-orient: vertical; }  
.container div { box-flex: 1; }

(для цього вам можуть знадобитися префікси -moz - і -webkit - )

1
додано

I think it's impossible without JavaScript but according what you need you can use this kind of stuff: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

1
додано
Гм ... Так, такий вид виглядає більш смутливим хаксом, ніж просто використанням javascript. Дякую, що відповіли, це дуже цікава стаття.
додано Автор siliconrockstar, джерело

Для рожевого

#shadow{
    height: inherit;
}
0
додано
Здається, не працює, я припускаю, тому що ви не можете успадкувати висоту, який не вказано.
додано Автор siliconrockstar, джерело

Добре. існує декілька способів зробити це. Найстарішою є використання великого підкладки нижньої частини та великої негативної нижньої межі, як пояснено тут: http://www.alphapapahotel.com/equal-height-div-columns-100-percent/css/

Але у цього способу є недоліки: вам потрібно встановити переповнення елемента батьків для прихованого, щоб він працював. Отже, якщо ви внутрішні абсолютно розташовані елементи переповнюють це, ви не можете. Крім того, якщо область всередині "переповнення: прихована"; div мають прив'язку (наприклад, ), область в розділі div буде прокручуватися, а не сторінка.

Інший спосіб полягає у використанні властивості таблиці-комірки: http://jsfiddle.net/8UPeR/ . Не працював у старих веб-переглядачах.

Але для простого розгортання #shadow до висоти #content є прості способи, наприклад, використання псевдо-елементів ( http: //jsfiddle.net/PWMsz/1/ ) або "позиція: абсолютна", як на прикладі топека.

0
додано