iframe с фиксированной позицией css: возможно? - PullRequest
7 голосов
/ 16 ноября 2010

Я хотел бы добавить несколько объявлений на внешний сайт, для этого я использую iframe:

<!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">
<body style="background:#ddd">
<center>My ad</center>
<iframe src="http://www.google.com" style="position:fixed; top:50px; left:0; width: 100%; bottom: 0; border: 0 ">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>

iframe находится в правильном положении, но «bottom: 0» не работает: Зачем ?Я хотел бы, чтобы iFrame следовал за изменением размера окна: как продолжить?

Ответы [ 4 ]

19 голосов
/ 30 апреля 2013

Я знаю, что это немного поздно, но я нашел этот вопрос через Google, и, несомненно, другие тоже. Если вы хотите исправить положение iframe таким же образом, как и положение div, вы можете обернуть его в фиксированную позицию div и сделать его размером 100%.

Этот код растягивает iframe по всей странице, оставляя место для меню в верхней части.

CSS:

#iframe_main {
    height: 100%;
    width: 100%;
}

#idiv {
    position: fixed;
    top: 41px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

HTML:

<div id='idiv'>
     <iframe id="iframe_main"> 
     </iframe>
</div>
2 голосов
/ 25 февраля 2012

Попробуйте добавить тег стиля и стилизацию iFrame.

<!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">
<style type='text/css'>
     body { background-color: #DDD; margin: none; }
     iframe { position: fixed; top: #px; left: #px; }
</style>
<body>
<center>My ad</center>
<iframe src="http://www.google.com" border="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
0 голосов
/ 28 декабря 2013

почему бы вам не удалить атрибут CSS "top: 50px"? Тогда «дно» будет хорошо работать.

0 голосов
/ 16 ноября 2010

Просто сделай:

<!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">
    <body style="background:#ddd">
        <center>My ad</center>
        <div style="position:fixed; top:50px; left:0; width: 100%; bottom: 0; border: 0 ">
            <iframe src="http://www.google.com" style="width: 100%; height: 100%; border: 0">
                <p>Your browser does not support iframes.</p>
            </iframe>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...