IE9-10 height: 100% не работает

Когда я помещаю абсолютный позиционный div (#window) внутри div ячейки таблицы (# cell-2), #window не отображается в IE9 и 10. Он работает но в других браузерах. Я поставил скрипку в конце этого поста, демонстрируя это.IE9-10 height: 100% не работает

Вот HTML:

<body> 
    <div id="table"> 
     <div id="cell-1"></div> 
     <div id="cell-2"> 
      <div id="window"></div> 
     </div> 
    </div> 
</body>

И вот CSS:

html, body{ 
    height:100%; 
} 

#table{ 
    display:table; 
    width:100%; 
    height:100%; 
    background-color:blue; 
} 

#cell-1{ 
    display:table-cell; 
    height: 100%; 
    width: 210px; 
    background-color:black; 
} 

#cell-2{ 
    display:table-cell; 
    position:relative; 
    height:100%; 
    background-color:green; 
} 

#window{ 
    position:absolute; 
    overflow-y:scroll; 
    overflow-x:hidden; 
    background-color:yellow; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}

You can find the fiddle here. Вы заметите, что в правой части экрана правильно отображается желтый div в браузерах, отличных от IE. Но отображает зеленый div при использовании IE9 и IE10.

Следует отметить, что #window - это модальное окно, которое будет генерироваться динамически и должно охватывать содержимое # cell-2, которое необязательно пусто. Требуется переполнение.

Проблема, похоже, связана с тем, что IE, по-видимому, игнорирует высоту: 100%; потому что высота: 100px; например, будет отображаться как ожидалось.

Любая помощь будет оценена по достоинству. Спасибо

источник

2015-01-08 D.Mill

Это вид почему я говорю людям IE в корне нарушается (что и риск безопасности, присущие такой неряшливый код), и я не загрузил его в течение 5 секунд требуется, чтобы установить Firefox, за исключением не менее 10 лет. Я действительно получаю небольшой момент паники в любое время, когда он случайно запускается, пытаясь обработать некоторое расширение файла из ОС. Я понимаю, что большинство разработчиков не могут сказать: «Я больше не буду разрабатывать для IE». Я думаю, что это проблема для них и их компаний - это огромная ответственность и свидетельствует о неуважении к вашим клиентам поддержки IE. –

Удалить позицию: абсолютный от #window класс и попробовать, он работает !!

#window{ 
 
    overflow-y:scroll; 
 
    overflow-x:hidden; 
 
    background-color:yellow; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
}

источник

2015-01-08 16:36:22

В качестве альтернативы, удалите 'position: relative' из' # cell-2' и поместите 'position: relative' в' # window'. Проблема в том, что позиция: relative в # cell-2 стирает ширину и высоту в IE по неизвестным причинам. –

Уловка здесь заключается в том, что мы хотим, чтобы '# window' вел себя как модальный. не устраняет ли положение абсолютного создания потенциальных проблем с укладкой? @AlexPakka Спасибо, что объясняет вопрос, который у нас есть. По крайней мере, я понимаю, что это такое. –

Я собираюсь добавить к моему предыдущему комментарию и отредактировать первое сообщение: '# cell-2' может ** не ** быть пустым. Таким образом, положение абсолютное гарантирует, что '# window' будет складывать выше (z) содержимое. Оба решения здесь вызывают проблемы в этом случае –

Попробуйте установить отступы 0 и высота: авто; в #window.

#window{ 
position:absolute; 
overflow-y:scroll; 
overflow-x:hidden; 
background-color:yellow; 
top:0; 
left:0; 
width:100%; 
height:auto; 
padding:0; <----- 
}

источник

2015-01-08 16:40:26

Спасибо за ответ. Это, похоже, не работает, хотя –

Просто подтянул свою скрипку в IE, кажется, все работает нормально. –

Хм, это интересно, какую версию IE вы используете? С каким режимом документа? –

IE9-10 height: 100% не работает

ответ

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