Центрирование фрейма? - PullRequest
Новая
       3

Центрирование фрейма?

1 голос
/ 02 февраля 2012

Какой лучший способ центрировать iframe?

Предвидите ли вы какие-либо проблемы с чем-то простым, как это? 

<html>
<body>

<iframe src="https://abc.123.com/" width="100%" height="100%"></iframe>



</body>
</html>

Ответы [ 3 ]

1 голос
/ 02 февраля 2012

Вот мой дубль: 

<html>
<body>

<iframe src="https://abc.123.com/" style="border: none; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

</body>
</html>

Вам понадобится этот CSS для обеспечения 100% высоты и ширины, а также без полей и отступов. 

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

http://jsfiddle.net/PAmDU/

Имейте в виду, что это может вызвать презрение пользователей, которые находят несоответствия, когда кнопка «назад / вперед» изменяет всю страницу, а не фрейм, охватывающий всю страницу. Если возможно, лучше избегать использования iframes для чего-то подобного, если вообще во все эти дни.

0 голосов
/ 02 февраля 2012

Если вы действительно хотите, чтобы он был отцентрирован и имел ширину от 100%, используйте что-то вроде этого: 

<html>
<body style="margin: 0;">
    <div style="margin: 0 auto; width: 500px;"><!--Change this width if you want-->
        <iframe src="http://www.w3schools.com" style="width: 100%; height: 100%; border: none;">
        </iframe>
    </div>
</body>
</html>

Я также избавился от границы iframe, которая вызывает полосы прокрутки.

0 голосов
/ 02 февраля 2012 
<iframe src="https://abc.123.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

Это бы сработало, но у вас все равно будет очень маленькая серая рамка.

Чтобы исправить это, используйте это в CSS: 

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

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

...