CSS и Iframe. Как просмотреть всю страницу без прокрутки в Iframe? - PullRequest
Новая
       2

CSS и Iframe. Как просмотреть всю страницу без прокрутки в Iframe?

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

Я пытаюсь разработать макет с помощью CSS и с помощью Iframe.Как я могу показать полную страницу в iframe без прокрутки?Подходит ли 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="pt">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>layout basic method web</title>
    <style type="text/css" media="screen">
        #container
        {
        width: 100%;
        height: 100%;
        background-color: #fff;
        }

        iframe
        {
        border-style: none;
        width: 100%; 
        height: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
            <h1>Header</h1>
        </div>
        <div id="content">
            <h2>Subheading</h2>
            <IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME>
        </div>
        <div id="footer">
            Footer
        </div>
    </div>
</body>
</html>

Если вы протестируете код, вы увидите, что CSS создает прокрутку внутри страницы.Как мне избавиться от этого свитка и показать всю страницу?

С наилучшими пожеланиями,

ОБНОВЛЕНИЕ:

Я почти на месте.Мне нужно только, чтобы прокрутка вверх / вниз проходила через верхний колонтитул, точно так же, как проходила через нижний колонтитул.Это возможно?Пожалуйста, смотрите код.Просто скопируйте / вставьте его. 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
    #printhead {display:none;}

    html {
        height:100%; 
        max-height:100%; 
        padding:0; 
        margin:0; 
        border:0; 
        background:#fff; 
        font-size:80%; 
        font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
        /* hide overflow:hidden from IE5/Mac */ 
        /* \*/ 
        /*overflow: hidden;*/ 
        /* */ 
    }

    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

    #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}

    /*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/

    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;}

    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}

    .pad1 {display:block; width:18px; height:50px; float:left;}

    .pad2 {display:block; height:50px;}

    .pad3 {display:block; height:500px;}

    #content p {padding:5px;}

    .bold {font-size:1.2em; font-weight:bold;}

    .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}

    h2 {margin-left:5px;}

    h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
    <div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
    <IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>

Любые подсказки, как этого добиться?

С наилучшими пожеланиями,

Ответы [ 4 ]

2 голосов
/ 30 декабря 2010

Если вы хотите избавиться от полосы прокрутки в главном окне, добавьте стиль overflow: 

#container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
}
2 голосов
/ 30 декабря 2010

Вам нужно будет установить высоту фрейма, чтобы он соответствовал высоте страницы, которую вы просматриваете.

Если страница находится в том же домене, вы можете использовать javascript для динамического изменения размера фрейма в соответствии с размером тела просматриваемой страницы.Есть несколько плагинов jQuery, которые это сделают.

Если это внешний домен, вы не можете сделать это, поэтому вам просто нужно установить свойство height в iframe, чтобы оно совпадало.

1 голос
/ 12 августа 2012

Вы можете сделать это с помощью javascript: 

   function resizeFrame(){
    var iframe = parent.document.getElementById('id of your iframe');  
    $(iframe).height($('#your top html tag inside your iframe').height());
    $(iframe).width($('#your top html tag inside your iframe').width());
   }

Затем вызвать эту функцию при загрузке и после любых действий скрытия / отображения, которые изменят длину формы: resizeFrame ();

Еслиу вас есть поля / отступы в HTML-теге верхнего уровня внутри iframe, вам может потребоваться добавить px к height () / width () следующим образом: 

    $(iframe).height($('#your top html tag inside your iframe').height()+40);
    $(iframe).width($('#your top html tag inside your iframe').width()+20);
0 голосов
/ 30 декабря 2010

iframe не может отрегулировать размер относительно страницы, которую он показывает.Вам нужно будет настроить его размер с помощью javascript, что подразумевает, что вы заранее знаете размер страницы.Если вы только что показали содержимое другой страницы внутри себя, посмотрите на ajax.

Очень простой пример можно найти здесь: http://aleembawany.com/2005/09/01/ajax-instant-tutorial

помните, что загрузка страниц с помощью ajax в междоменном контексте может не работать из-за настроек безопасности браузера.

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

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

...