% 100 yükseklikte tam ekran iframe

238

İframe yüksekliği =% 100 tüm tarayıcılarda destekleniyor mu?

Doctype'i şu şekilde kullanıyorum:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Benim iframe kodumda, eğer dersem:

<iframe src="xyz.pdf" width="100%" height="100%" />

Yani aslında kalan sayfanın yüksekliğini alacak mı?

Ayrıca kaydırma çubuklarıyla ilgili olarak, scrolling="no"Firefox'ta devre dışı bırakılan kaydırma çubuklarını görebiliyorum ... Kaydırma çubuklarını nasıl tamamen gizleyebilir ve iframe yüksekliğini otomatik olarak ayarlayabilirim?

javascript  html  css  iframe  html-frames 
— testndtv
kaynak
14
Aslında tüm tarayıcıları yüklü değil .. Ayrıca farklı sürümleri ... Ayrıca sadece standart bir tür olmasını sağlamak istedim ..
— testndtv
1
Ayrıca bir css doğrulayıcıda da deneyebilirsiniz.
— Ruben
6
Evet, bu herhangi bir hata / uyarı vermez ... Ama sorum şu: Tüm tarayıcılar aslında% 100 yükseklik uyguluyor mu?
— testndtv
Benim için bu cevap iyi çalıştı: stackoverflow.com/questions/5272519/…
— Zied Hamdi

Yanıtlar:

276

Çerçeve kümesini önceki yanıt durumları olarak kullanabilirsiniz, ancak iFrames kullanmak konusunda ısrarcıysanız, aşağıdaki 2 örnek çalışmalıdır:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Bir alternatif:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Yukarıda gösterildiği gibi 2 alternatifle kaydırmayı gizlemek için:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

İkinci örnekle hackleyin:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

İFrame'in kaydırma çubuklarını gizlemek için üst öğe kaydırma çubuklarını gizlemek için yapılır overflow: hiddenve iFrame, kaydırma çubuklarını sayfanın dışına zorlayan ve gövdenin kaydırma çubuklarına sahip olmadığı için% 150 genişliğe ve yüksekliğe kadar gitmek için yapılır iframe'in sayfanın sınırlarını aşması beklenemez. Bu, iFrame'in kaydırma çubuklarını tam genişlikte gizler!

— balta
kaynak
3
Kulağa hoş geliyor ... Sadece bir soru ... Neden style = "height: 100%; width: 100%;" her
— halükarda
1
Ayrıca sadece IE% 100 yükseklik (yaklaşık 200 piksel ht alır) almıyor ... FF ve Safri kalan tüm yüksekliği almak ..
— testndtv
@Boris Zbarsky Evet, bana bildirdiğiniz için teşekkürler! Gönderiyi şimdi güncelledim !! @hmthr Çift etiketlerle ilgili ilk sorunuz, önceki tarayıcıların "yükseklik" ve "genişlik" etiketlerini almaları, ancak stil etiketleriyle iyi çalışmamalarıdır! IE hata hakkında, bu durumda ilk kod ile sopa tercih ederim.
— Balta
15
İç çerçevenin% 100'ü doğru kullanmasını sağlamak için üst öğenin% 100 olması gerekir. Daha yeni dokümanlarda html ve gövde etiketi otomatik olarak% 100 değildir. Yükseklik eklediğimde: html ve vücut için% 100 daha sonra kusursuz çalıştı. Yani, soru için doğru cevap, bence rudie'nin yanıtı, ancak xhtml doktuğumu saklamam gerekiyordu. Ayrıca, taşma kurallarının gerekli olmadığını unutmayın. Kaydırma çubukları daha sonra istendiği gibi çalışır - otomatik olarak.
— Spiralis
3
Bu SO yanıtı da çok kısa ve güzel.
— Uwe Keim
164

Tam ekran oluşturmak için 3 yaklaşım iframe:

  • Yaklaşım 2 - Sabit konumlandırma

    Bu yaklaşım oldukça basittir. Sadece konumunu ayarlamak fixedeleman ve bir ekleme height/ widthait 100%.

    Buraya Örnek

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Snippet'i genişlet

  • Yaklaşım 3

    Son olarak bahsedilen, sadece set heightarasında body/ html/ iframeiçin elemanlar 100%.

    Buraya Örnek

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Snippet'i genişlet

— Josh Crozier
kaynak
4
Seçenek 1'in bir varyasyonunu kullandım ... genişliği:% 100 ve yükseklik: 100vh kullandım çünkü çektiğim kaynak oldukça genişti ve iframe bir div içinde yer alıyor. Mükemmel çözüm. Teşekkür ederim.
— NotJay
2
ekleme display: blockçift ​​kaydırma çubuğu olmasını önlemek için hile yaptı
— KavenG
45

1. DOCTYPE cihazınızı daha az katı bir şekilde değiştirin. XHTML kullanmayın; aptalca. HTML 5 belgesini kullanmanız yeterlidir:

<!doctype html>

2. iframe'in üst öğesinin yüksekliğinin olduğundan emin olmanız (tarayıcıya bağlı olarak) gerekebilir. Ve ebeveyni. Ve ebeveyni. Vb:

html, body { height: 100%; }
— Rudie
kaynak
9
Burada benim için önemli olan html ve gövde etiketinin yüksekliğe ihtiyaç duymasıydı:% 100. Teşekkürler.
— Spiralis
1
Yalnızca gövde ayarlama Chrome'da çalışır, ancak diğer tarayıcılarda çalışmaz.
— Dingle
— Josh Crozier
36

Aynı problemle karşılaştım, bir iframe'i div'a çekiyordum. Bunu dene:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

Yükseklik, görüntü alanı yüksekliğini temsil eden 100vh olarak ayarlanmıştır. Ayrıca, genişlik 100vw olarak ayarlanabilir, ancak kaynak dosya yanıt veriyorsa büyük olasılıkla sorun yaşarsınız (çerçeveniz çok geniş olacaktır).

— NotJay
kaynak
3
sorunsuz bildiğim kadarıyla herhangi bir tarayıcıda desteklenmez
— VisualBean
1
Bu sorunla uğraşmayı itiraf etmekten daha fazla zaman geçirdikten sonra, bu tam olarak ihtiyacım olan şey. Bir web sitesi yerine, görünüm alanı yüksekliğinde küçük bir ayarlama gerektiren başka bir HTML dosyası kullandım ve şimdi gitmek iyi. Teşekkür ederim!
— Thomas Jacobs
29

Bu benim için çok iyi çalıştı (yalnızca iframe içeriği aynı alan adından geliyorsa ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
— Ivan
kaynak
21
Bu, yalnızca iframe srcüst sayfa ile aynı alandaysa çalışır, aksi takdirde izin verilmedi hatası alırsınız contentWindow.document.
— wolfyuk
Bu işlemi Wordpress'in içinde yapmak için biraz zaman aldım, eklentime bir kısa kod ekledim. TIKIR TIKIR ÇALIŞIYOR.
— Andy
İşe yarıyor. ancak sorun, her iç iframe postbackindeki yüksekliği yeniden hesaplamamasıdır. Herhangi bir çözüm var mı?
— Behrouz.M
7 

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>
Snippet'i genişlet

— khoa
kaynak
6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

— Heitor Giacomini
kaynak
4

Aşağıdaki test çalışma

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
— Uma Shankar Goel
kaynak
1
Burada başka 14 cevap daha var. Cevabınızın diğer 14 kişiden daha iyi veya en azından farklı olduğunu açıklayabilir misiniz?
— Stephen Rauch
2

Akshit Soota'nın cevabına ek olarak: her bir ana öğenin, varsa tablo ve sütunun yüksekliğini açıkça ayarlamak önemlidir :

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
— Brabbeldas
kaynak
2

Önce css eklersiniz

html,body{
height:100%;
}

Bu html olacaktır:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
— Tarık Javed
kaynak
1

İşte kısa bir kod. Geçerli pencere yüksekliğini bulmak için bir jquery yöntemine dayanır. İFrame yüklendiğinde, iframe'in yüksekliğini geçerli pencereyle aynı olacak şekilde ayarlar. Daha sonra sayfanın yeniden boyutlandırılması için gövde etiketinde, belge yeniden boyutlandırıldığında iframe'in yüksekliğini ayarlayan bir onresize olay işleyicisi bulunur.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

İşte çalışan bir örnek: http://jsbin.com/soqeq/1/

— BraveNewMath
kaynak
0

Sıvı tam ekran oluşturmanın başka bir yolu iframe:

Gömülü video tüm alanı doldurur viewport , sayfa yüklendiğinde alanı

Video veya gömülü içeriğe sahip açılış sayfaları için hoş bir yaklaşım. Katıştırılmış videonun altında, sayfayı aşağı kaydırırken ortaya çıkan ek içeriğe sahip olabilirsiniz.

Misal:

CSS ve HTML kodu.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>
Snippet'i genişlet

— DAH
kaynak
Firefox için bazı javascriptlere ihtiyacınız olabileceğini lütfen unutmayın. Firefox'ta iframe yüksekliği ile ilgili yaygın bir sorun vardır.
— DAH
0

http://embedresponsively.com/

Bu harika bir kaynak ve çok iyi çalıştı, birkaç kez kullandım. Aşağıdaki kodu oluşturur ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
— Tom Witherington
kaynak
0

Yalnızca bu benim için çalıştı (ancak "aynı alan" için):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

şunlardan birini kullanabilirsiniz: 

MakeIframeFullHeight(document.getElementById("iframe_id"));

veya 

<iframe .... onload="MakeIframeFullHeight(this);" ....
— T.Todua
kaynak
0

Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe uyarınca , yüzde değerlerine artık izin verilmiyor. Ama aşağıdakiler benim için çalıştı

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

width:100%Çalışmasına rağmen height:100%çalışmıyor. Böylece window.innerHeightkullanılmıştır. Yükseklik için css piksellerini de kullanabilirsiniz.

Çalışma kodu: Link Çalışma alanı: Link

— Agnel Vishal
kaynak
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
— blueDexter
kaynak
0

İframe yüklendiğinde iframe'in gövde yüksekliğini hesaplayacak bir işlevi çağırabilirsiniz:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
— Tejpal Sharma
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.