Имейте экран заполнения iFrame минус установленный нижний колонтитул пикселя - PullRequest
Новая
       3

Имейте экран заполнения iFrame минус установленный нижний колонтитул пикселя

0 голосов
/ 28 октября 2010

Как вы получаете iframe для заполнения высоты экрана минус пространство нижнего колонтитула 33px внизу ?Мне нужны полосы прокрутки в iframe (стрелки вверх и вниз), чтобы показать.И это должно быть без Javascript (так что он может приятно ухудшиться:).

(Единственное, что я нашел на SO, это использовать padding-top, который, кажется, не работает в моем случае): 

<body>
  <div style="position: fixed; width: 100%; height: 100%; bottom: 33px;">
      <iframe frameborder="0" noresize="noresize" src="http://google.com" 
       style="position: absolute; width: 100%; height: 100%; padding-top: 33px;">
      </iframe>
  </div>
  <div style="height: 33px; bottom: 0px; position: absolute; background: red;">
       /* Footer Content */
  </div>
</body>

Спасибо всем!

Ответы [ 2 ]

1 голос
/ 28 октября 2010

Я заставил его работать с [GASPS] <table>, но я не могу заставить его работать с <div>. Вы правы, это толкает полосы прокрутки <iframe>. В любом случае, вам есть над чем поработать, пока не начнете работать с <div>: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type='text/css'>
html, body{
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
}
table{
    height:100%;
    width:100%;
    padding:0px;
    border-collapse:collapse;
    border:none;
}
td{
    padding:0px;
}
</style>
</head>

<body>
    <table>
        <tr>
            <td>
                <iframe frameborder="0" noresize="noresize" src="http://google.com" style="display:block; width:100%; height:100%; overflow-y:scroll; margin:0px; padding:0px;"></iframe>
            </td>
        </tr><tr>
            <td style='height:33px;'>
                <div style="height: 33px; width:100%; bottom: 0px; position: absolute; background: red;">
                   /* Footer Content */
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Примечание: не используйте строгий тип документа. <iframe> не поддерживается.

PS. html,body{} является ключевым.

0 голосов
/ 28 октября 2010 
<body style="margin:0;padding:0;>
  <div style="position:relative; top:0; right:0; bottom:33px; left:0;">
      <div style="width: 100%; height: 100%; bottom: 33px; position:fixed">
          <iframe frameborder="0" noresize="noresize" src="http://google.com" 
           style="position: absolute; width:100%; height:100%; overflow-y:scroll">
          </iframe>
      </div>
  </div>
  <div style="height: 33px; width:100%; bottom: 0px; position: absolute; background: red;">
       /* Footer Content */
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...