Сделать заполнение фрейма в нижней части экрана, не используя таблицы - PullRequest
Новая
       10

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

3 голосов
/ 07 июня 2009

Я хочу отображать заголовок с произвольным содержимым над iframe, который занимает остальную часть экрана. Мне удалось заставить это работать с таблицами, используя следующее: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body, iframe, table, tr, td {
  margin: 0; padding: 0;
}
html, body, iframe, table, #content {
  height: 100%; width: 100%;
}
table {
  border-collapse: collapse;
}
iframe {
  border: 0;
}
</style>
</head>
<body>
  <table>
    <tr><td>
      <div id="header">
        <p>some arbitrary stuff in a header</p>
        <p>this is sized dynamically</p>
        <p>it's not a fixed size</p>
      </div>
    </td></tr>
    <tr><td id="content">
      <iframe src="http://www.bing.com/search?q=stackoverflow" />
    </td></tr>
  </table>
</body>
</html>

Это работает в Firefox и Chrome, но не в IE7 (я не знаю почему). Без использования таблиц это самое близкое, что я мог получить: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body {
  margin: 0; padding: 0;
  height: 100%;
}
iframe {
  margin: 0; padding: 0;
  width: 100%;
  border: 0;
}
</style>
</head>
<body>
  <div id="header">
    <p>some arbitrary stuff in a header</p>
    <p>this is sized dynamically</p>
    <p>it's not a fixed size</p>
  </div>
  <iframe src="http://www.bing.com/search?q=stackoverflow" />
</body>
</html>

Это выглядит одинаково во всех браузерах, но iframe слишком короткий. Если я установлю его высоту на 100%, он станет больше экрана и появится две полосы прокрутки (так же, как IE7 в табличной версии) Я хочу, чтобы iframe занимал все свободное место в окне браузера, но не больше. Я бы предпочел не прибегать к Javascript.

Ответы [ 5 ]

1 голос
/ 13 декабря 2010

Это работает, чтобы заполнить пространство: 

iframe {
    margin: 0; 
    padding: 0;
    width: 100%;
    height: 800px; (Whatever the height of your content is)
    border: 0;
}
1 голос
/ 05 декабря 2009

Я не думаю, что блочная модель CSS имеет концепцию доступного вертикального пространства.

0 голосов
/ 13 ноября 2009

Почему бы тогда просто не использовать старую моду, обычные кадры? Смысл iFrame в том, что он не выходит за рамки обычного элемента.

0 голосов
/ 26 ноября 2009

Попробуйте использовать следующую функцию JavaScript 

<script language="javascript">
function adjust_iframe(oFrame)
{
    if(!oFrame) return;

    var win_height;
    var frm_height;     

    // Get page height Firefox/IE
    if(window.innerHeight) win_height = window.innerHeight;
 else if(document.body.clientHeight) win_height = document.body.clientHeight;   

    // Dtermine new height
    frm_height = win_height - oFrame.offsetTop - 15; // replace 15 accordingly

    // Set iframe height
    oFrame.style.height = frm_height + "px";
}
</script>

Обратите внимание, что вам придется вызывать его в какой-то момент (например, Onload), например: 

<body onload="adjust_iframe(document.getElementById('myiframe'));">
0 голосов
/ 07 июня 2009

Это выглядит так, как вам нужно. Посмотрите на исходный код для получения дополнительной информации.

...