Как растянуть фиксированный по высоте div. Мы хотим, чтобы блок, созданный с помощью тега div.
имел фиксированную высоту и при этом мог растягиваться по высоте дальше. Старые стандарты позволяли растягивать блок DIV. который мы зафиксировали по высоте свойством CSS height (пример: <div style="height:100px;">блок<div> ), в зависимости от высоты внутреннего контента. Но старые стандарты в данное время из современных браузеров поддерживает только Internet Explorer 9, и то в зависимости от параметров псевдо тэга DOCTYPE. По сути, тег DOCTYPE можно не использовать (вообще удалить эту строку). И о чудо блок div фиксированный по ширине в Internet Explorer 9 начнет растягиваться. Но это работает только в IE9.
Нужно что бы content имел 95% ширины (но в пределах от 700 до 1200px) и авто высоту (по всему доступному пространству). Вопрос исжеван на 100 рядов, но столкнувшись с проблемой погуглив внятного ответа не нашел. Нужно чтобы былок был растянут на. Есть n-количество элементов div в родительском элементе div с высотой, скажем 600px. Как мне с помощью css разместить дочерние элементы по.
Div style="background-image: url(pic_1.png);"></ div >. Мы хотим, чтобы блок, созданный с помощью тега div, имел фиксированную высоту и при этом мог растягиваться по высоте дальше.
С другими браузерами, в частности с Mozilla Firefox 5. 0 и Opera 11. 0, такая махинация не пройдет. Они поддерживают только новые стандарты.
Более того удаление строки DOCTYPE может привести к некорректной работе веб-страниц вашего сайта. А новые стандарты HTML (и XHTML) не позволяют растягивать блок, созданный с помощью тэга DIV, если мы зафиксировали его высоту. В то же время если не фиксировать высоту блока, то он вплотную прижмется к контенту. В некоторых случаях это может привести к искажению дизайна веб-страницы:. Как выйти из этой ситуации? Только с использованием таблиц. Таблица в HTML создается с использованием тега TABLE.
Таблицу можно создать фиксированной по высоте. И при этом она всегда растягивается в зависимости от высоты внутреннего контента. Более того, если мы с помощью стилей зададим начальную высоту таблицы, то на эту высоту растянется наш блок DIV. Растянется, даже если таблица будет без наполнения. Пример кода:. <div style="width:300px;">.
<table cellpadding="0" cellspacing="0" style="width:100%; height:300px;">. <td>контент</td>. </table>. Вот так мы получили DIV блок, который имеет фиксированную (нужную нам) высоту и при этом растягивается дальше вниз при наполнении его контентом. Но при этом желательно использовать переходный доктайп. И раз тема пошла про тег div.
то стоит коснуться еще одной его особенности. По новым стандартам html если мы вложим один блок div в другой, то первый (внешний) блок не станет ограничивать внутренний div блок. Пример:. <div style=" width:100px; background-color:yellow; padding-top: 100px;">. <div style="width:150px; height:100px; background-color:fuchsia; margin-left:50px;"> </div>. Как видите, внутренний div блок спокойно выходит за границы внешнего div блока, если его ширина имеет большее значение.
При работе над дизайном страницы учтите эту особенность.