Высота iframe в задаче div - PullRequest
Новая
       8

Высота iframe в задаче div

0 голосов
/ 14 сентября 2010

У меня проблемы с подгонкой iframe к точной высоте div.Проблема не в том, что не заполнит полный div, но он превосходит div.Вот что у меня сейчасCSS 

*{margin:0;padding:0}
html, body {height:100%;width:100%;position: relative;}

#header {
   height:100px;
   width:100%;
   background-color:#FF0000;
} 

#left {
    height:inherit;
    width: 250px;
    float:left;
    background-color:#0000FF;
}
#right {
    margin-left:250px;
    background-color:#FFFF00;
    height:inherit;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div id="header"></div>
   <div id="left">
       <!--<iframe src="http://www.microsoft.com" frameborder="1"></iframe>-->   
   </div>
   <div id="right">
   </div>
</body>
</html>

Если вы посмотрите этот код в IE (или другом браузере), вы заметите, что iframe слишком длинен ровно на 100 пикселей (высота заголовка).Как я могу это исправить?Также приветствуются любые другие комментарии к коду.

ОБНОВЛЕНИЕ !!Я изменил код, чтобы показать область, покрытую div.Если вы посмотрите этот код, вы увидите, что левый (синий) и правый (желтый) элементы div выходят за пределы 100% области экрана.Я хочу, чтобы он оставался в области экрана (без прокрутки).

Ответы [ 2 ]

0 голосов
/ 13 сентября 2013

Вы можете обновить свои стили и добавить стиль для iframe. 

#frame_box
{
    height:98%;
    width: 250px;
}

Обновить код кадра как: 

<iframe id="frame_box" src="http://www.microsoft.com" frameborder="1"></iframe>

Вот jsfiddle для вашего кода: Обновленный код .

0 голосов
/ 15 сентября 2010

Редактировать: попробуйте настроить ваши divs следующим образом: 

<div id="splitter">
   <div id="header"></div>
   <div id="left"></div>
   <div id="right"></div>
</div>

и CSS, как это: 

*{margin:0;padding:0}
html, body {height:100%;width:100%;position: relative;
}

#splitter
{
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   height:100%;
   padding-top:100px;
   position:relative;
}
#header {
   margin-top:-100px;
   height:100px;
   width:100%;
   background-color:#FF0000;
}

#left {
    height:inherit;
    width: 250px;
    float:left;
    background-color:#0000FF;
}
#right {
    margin-left:250px;
    background-color:#FFFF00;
    height:inherit;
}

Это заставляет его работать в ie8 и firefox, но Chrome не делаеткажется, не поддерживает размер ящика, и ie7 взрывается.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...