Я пытаюсь создать макет с заголовком с фиксированной высотой в верхней части экрана, а затем с фреймом ниже, занимающим оставшееся пространство. Решение, которое я придумал, следующее:
<!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>
По сути, я создаю абсолютно позиционированный div под заголовком и определяю его размер, чтобы он занимал оставшееся пространство, а затем помещаю туда полноразмерный iframe.
Проблема, с которой я сталкиваюсь, заключается в том, что если вы вставите код точно так, как показано ниже, используя XHTML Strict, в каждом браузере (протестировано с / chrome / safari / ie8) вы увидите вертикальную полосу прокрутки с несколькими пикселями пустого пространства под делом.
Проведя некоторые эксперименты, я обнаружил, что если я полностью удаляю doctype, он работает в safari / chrome, но IE становится еще хуже, устанавливая высоту iframe равной 300px или около того. Если я установил doctype в transitional, он работает в safari / chrome, но имеет ту же проблему, что и в строгом случае для IE8. Если я использую тип документа HTML5, у него та же проблема, что и для всех браузеров строго.
Наконец, если я удаляю iframe в любом из этих случаев, все выкладывается просто отлично.
У кого-нибудь есть идеи?