iframe вызывающая вертикальная полоса прокрутки 100% высотой
Я пробую к расположению дизайн, который имеет фиксированный заголовок высоты наверху экрана и затем iframe ниже занимания остающегося места. Решение, которое я предложил, следующие:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style>
</head>
<body>
<div style="height:70px;background-color:blue;"></div>
<div style="position:absolute;top:70px;bottom:0;left:0;right:0;">
<iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe>
</div>
</body>
</html>
По существу я создаю абсолютно расположенное отделение ниже заголовка и измеряю его для приведения в рабочее состояние остальной части пространства, затем помещая полный размер iframe там.
Проблема, с которой я сталкиваюсь, состоит в том, что при вставке кода точно, как замечено ниже, с помощью Строгого XHTML, в каждом браузере (протестированный w/chrome/safari/ie8) Вы будете видеть вертикальную полосу прокрутки с несколькими пикселями пробела ниже отделения.
Делая некоторое экспериментирование, я нашел, что, если я удаляю doctype полностью, он работает в сафари/хроме, но IE становится еще хуже, устанавливая iframe высоту на 300 пкс или около этого. Если я установил doctype на переходный, он работает в сафари/хроме, но имеет ту же проблему как в строгом случае для IE8. Если я использую HTML5 doctype, он имеет ту же проблему как строгую во всех браузерах.
Наконец, если я удаляю iframe в каком-либо из этих случаев, все размечается очень хорошо.
У кого-либо есть какие-либо идеи?
1 ответ
Добавление CSS body { overflow-y:hidden;}
устраняет вертикальную прокрутку. Если содержимое iFrame превышает размер страницы, то iframe получит полосу прокрутки вместо страницы.