Div 100% в ie 9

Alex Dark · October 17, 2011

Всем доброе.

Народ столкнулся с проблемой когда используется height div 100% и min-height 100% в ie 9.

Суть проблемы при div height=100% дивы растягиваются на видимую часть экрана, но если текст привышает, то он выходит за границы


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
html, body 
 {
  width:100%;
 height:100%; 
  margin:0;        
  padding:0;
 }
#layer_0
 {
  height:100%;
  background-color:#999999;
 }
.layer_1
 {
  height:100%;
  width:600px;
  background-color:#99CCFF;
 }
.layer_2
 {
  height:100%;
  width:300px;
  background-color:#CC66FF;
 }
</style>
</head>

<body>

<div id="layer_0" align="center">
  <div class="layer_1">
   <div class="layer_2">
    123
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    456
   </div>
  </div> 
</div>

</body>
</html>

и вродебы вопрос решается кода в блоке css #layer_0 - height:100%; меняю на min-height:100%; дивы тянуться все нормуль, но стоит уменьшить текст появляется очередная бяка, а именно слои больше не растягиваются, кроме layer_0, даже на высоту экрана

буду очень благодарен за кроссбраузерное решение.

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

t0xy · November 29, 2011

хочу заметить что это очень даже серьезная проблема в ие9, столкнулся с ней буквально недавно, так как необходимо было сделать нсколько сайтов с прижатым футером

всё было нормально, до того момента, пока я не стал использовать плагины для jQuery, которые динамически меняют содержимое окна в меньшую сторону(например cycler), мой прижатый футер при этом уезжает вверх, а внизу остается пустое место ровно на столько на сколько уменьшился "ужатый" контент дива

также подобное происходит если аяксом гружу на страницу контента меньше чем было до этого, например на последней странице каталога остается ооочень много пустого места внизу страницы, а мы находимся при этом на "белом листе"

если вручную "дёрнуть" какое-нибудь свойство у любого контейнера в девелопере, всё встает на свои места, думаю копать в эту сторону

пытался детектить ие9 и яваскриптом и делать перерисовку экрана после изменений на странице, пока не получилось, буду рад всем предложенным решениям

Select · November 29, 2011

используй http://csstemplater.com/ - может поможет

t0xy · November 29, 2011

вы так шутите или это реклама?

всё уже сверстано, тут описана конкретная проблема, появляющаяся только в ие9

кажется нашел кое-что на msdn

http://social.msdn.microsoft.com/Forums/ar/iewebdevelopment/thread/902aa3c2-51d1-4b29-9460-0bbddee14843

в общем нашел я проблему, два дня искал, у меня оказывается было указано свойство overfow-y в сбросе стилей для контейнера html, его надо было убрать и всё завелось и заработало как надо

Edited November 29, 2011 by t0xy

Sign In

Div 100% в ie 9

Question

Alex Dark

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

t0xy

Link to comment

Share on other sites

Select

Link to comment

Share on other sites

t0xy

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information