Pełna strona <iframe>

Mam przykładowy kod poniżej. Działa to dobrze we wszystkich przeglądarkach z wyjątkiem przeglądarek na urządzeniach mobilnych.Pełna strona <iframe>

Znacznik przepełnienia jest problemem.

współpracuje ze wszystkimi z wyjątkiem komórkowego:

margin: 0; padding: 0; height: 100%; overflow: hidden;

współpracuje ze wszystkimi komputerami mobilnymi, a nie:

margin: 0; padding: 0; height: 100%;

Jaki jest najlepszy sposób, aby zmusić go do pracy na obu?

<!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"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
      <iframe width="100%" height="100%" src="http://www.cnn.com" /> 
    </body> 
</html>

Źródło

2013-07-17 Lacer

Dlaczego nie po prostu przekierować na stronę "cnn.com"? – GolezTrol

cnn.com jest raczej przykładem. aby pokazać zachowanie, które próbuję zapobiec. – Lacer

wystarczy dodać '' do głowicy zawierającej HTML i reakcji jest ponownie (w przynajmniej częściowo). – Nukey

106

Oto kod roboczych. Działa w przeglądarkach stacjonarnych i mobilnych. mam nadzieję, że to pomoże. dzięki, że wszyscy odpowiadają.

<!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"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 

      #content 
      { 
       position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" /> 
     </div> 
    </body> 
</html>

Źródło

2013-07-18 04:14:00 Lacer

uważaj, gdy chcę umieścić powyżej element iframe - wystąpił problem z Chrome. Dodałem zamknięcie i działa –

Wygląda na to, że odbiera on "responsywność" (tj. Zwijanie kolumn itp.) Od treści w elemencie iframe. Ale w jakiś sposób tylko podczas otwierania strony z mobilnym safari, a nie podczas zmiany rozmiaru przeglądarki na komputerze. Jakieś pomysły, które mogą powodować takie zachowanie? – psteinweber

@psteinweber, wystarczy dodać '' do strony zawierającej. – jfeust

To jest to, czego używałem w przeszłości.

html, body { 
    height: 100%; 
    overflow: auto; 
}

Również w iframe dodać następujący styl

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

Źródło

2013-07-17 21:31:38

dzięki za odpowiedź, ale to w zasadzie to, co mam, więc to nie działa. W przeglądarce mobilnej odcina wszystko, co jest przepełnione i nie pozwala przewijać. – Lacer

@Lacer Spróbuj zastąpić 'overflow: hidden' z' overflow: auto' –

spróbował tego. w przeglądarce mobilnej nadal go odcina, a na komputerowych przeglądarkach powoduje podwójne przewijanie – Lacer

To jest obsługiwana cross-browser i jest w pełni elastyczny.

<iframe src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;">

Źródło

2017-04-13 15:17:34

Umieścić to w CSS.

iframe{ 
width:100%; 
height:100vh; 
}

Źródło

2018-03-08 19:19:02

Pełna strona <iframe>

Odpowiedz

Powiązane problemy