it-swarm.dev

صفحة كاملة <iframe>

لدي رمز المثال أدناه. هذا يعمل بشكل جيد مع جميع المتصفحات باستثناء المتصفحات على الأجهزة المحمولة.

علامة تجاوز السعة هي المشكلة.

يعمل مع الجميع باستثناء المحمول:

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

يعمل مع جميع الأجهزة المحمولة وليس أجهزة الكمبيوتر:

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

ما هي أفضل طريقة للحصول عليه للعمل على حد سواء؟

<!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>
80
Lacer

إليك رمز العمل. يعمل في متصفحات سطح المكتب والجوال. آمل أن يساعد. شكرا للجميع الاستجابة.

<!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>
138
Lacer

هذا متصفح مشترك ومتجاوب بالكامل:

<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%;
  ">
</iframe>
4
tawsif torabi

هذا ما استخدمته في الماضي.

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

أيضا في iframe أضف النمط التالي

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

ضع هذا في CSS الخاص بك.

iframe {
  width: 100%;
  height: 100vh;
}
2
shoriwa-shaun-benjamin