Dopasuj ramkę iframe do 100% pozostałej wysokości pojemnika

260

Chcę zaprojektować stronę internetową z banerem i ramką iframe. Mam nadzieję, że ramka iframe może wypełnić całą pozostałą wysokość strony i zmienić jej rozmiar automatycznie podczas zmiany rozmiaru przeglądarki. Czy można to zrobić bez pisania kodu JavaScript, tylko z CSS?

Próbowałem ustawić height:100%iframe, wynik jest dość blisko, ale iframe próbował wypełnić całą wysokość strony, w tym 30pxwysokość elementu div banera, więc otrzymałem niepotrzebny pionowy pasek przewijania. To nie jest idealne.

Informacje o aktualizacji : Przepraszam, że nie opisałem dobrze pytania, próbowałem marginesu CSS, wypełnienia atrybutu na DIV, aby pomyślnie zająć całą wysokość strony WWW, ale sztuczka nie działała na iframe.

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>
Rozwiń fragment kodu

Każdy pomysł jest mile widziany.

html css iframe Darkthread
źródło

Odpowiedzi:

236

Aktualizacja w 2019 r

TL; DR: Dzisiaj najlepszą opcją jest ostatnia w tej odpowiedzi - flexbox. Wszystko ładnie to obsługuje i ma od lat. Idź po to i nie oglądaj się za siebie. Pozostała część tej odpowiedzi została pozostawiona z przyczyn historycznych.

Sztuką jest zrozumienie, z czego bierze się 100%. Czytanie specyfikacji CSS może ci w tym pomóc.

Krótko mówiąc - istnieje coś takiego jak „zawierający blok” - który nie jest konieczny jako element nadrzędny. Mówiąc prosto, jest to pierwszy element w hierarchii, który ma pozycję: względną lub pozycję: bezwzględną. Lub sam element ciała, jeśli nie ma nic innego. Kiedy powiesz „szerokość: 100%”, sprawdza szerokość „bloku zawierającego” i ustawia szerokość elementu na taki sam rozmiar. Jeśli było tam coś jeszcze, możesz uzyskać zawartość „bloku zawierającego”, który jest większy niż on sam (w ten sposób „przepełniony”).

Wysokość działa w ten sam sposób. Z jednym wyjątkiem. Nie można uzyskać wysokości do 100% okna przeglądarki. Elementem najwyższego poziomu, na podstawie którego można obliczyć 100%, jest element body (lub html? Niepewny), który rozciąga się na tyle, aby pomieścić jego zawartość. Określenie wysokości: 100% nie będzie miało żadnego wpływu, ponieważ nie ma „elementu nadrzędnego”, względem którego można zmierzyć 100%. Samo okno się nie liczy. ;)

Aby coś rozciągało się dokładnie w 100% w oknie, masz dwie możliwości:

  1. Użyj JavaScript
  2. Nie używaj DOCTYPE. Nie jest to dobra praktyka, ale ustawia przeglądarki w „trybie dziwactwa”, w którym można ustawić wysokość = „100%” na elementach i rozciągnie je do rozmiaru okna. Pamiętaj, że reszta Twojej strony prawdopodobnie będzie musiała zostać zmieniona, aby uwzględnić zmiany DOCTYPE.

Aktualizacja: Nie jestem pewien, czy nie pomyliłem się już, kiedy to opublikowałem, ale z pewnością jest to teraz nieaktualne. Dzisiaj możesz to zrobić w arkuszu stylów: html, body { height: 100% }i faktycznie rozciągnie się on na całą twoją rzutnię. Nawet z DOCTYPE. min-height: 100%może być również przydatny, w zależności od twojej sytuacji.

Nie radziłbym też nikomu tworzyć dokumentu w trybie dziwactwa , ponieważ powoduje to o wiele więcej bólów głowy niż ich rozwiązuje. Każda przeglądarka ma inny tryb dziwactwa, więc sprawienie, by twoja strona wyglądała spójnie w różnych przeglądarkach, staje się o dwa rzędy wielkości trudniejsze. Użyj DOCTYPE. Zawsze. Najlepiej ten HTML5 - <!DOCTYPE html>. Jest łatwy do zapamiętania i działa jak urok we wszystkich przeglądarkach, nawet tych 10-letnich.

Jedynym wyjątkiem jest sytuacja, gdy musisz obsługiwać coś takiego jak IE5 lub coś takiego. Jeśli tam jesteś, to i tak jesteś sam. Te starożytne przeglądarki nie przypominają dzisiaj dzisiejszych przeglądarek, a niewiele porad, które tu podano, pomoże ci z nimi korzystać. Z drugiej strony, jeśli tam jesteś, prawdopodobnie po prostu musisz obsługiwać JEDNĄ przeglądarkę, która pozbywa się problemów ze zgodnością.

Powodzenia!

Aktualizacja 2: Hej, minęło dużo czasu! 6 lat później pojawiają się nowe opcje. Właśnie miałem dyskusję w komentarzach poniżej, oto więcej sztuczek, które działają w dzisiejszych przeglądarkach.

Opcja 1 - pozycjonowanie bezwzględne. Ładne i czyste, gdy znasz dokładną wysokość pierwszej części.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<div class="second-row">
  <iframe src="https://jsfiddle.net/about"></iframe>
</div>
Rozwiń fragment kodu

Kilka uwag - w second-rowpojemnik jest potrzebna, bo bottom: 0i right: 0nie działa na iframe z jakiegoś powodu. Ma to coś wspólnego z byciem „zamienionym” elementem. Ale width: 100%i height: 100%działa dobrze. display: blockjest potrzebne, ponieważ jest toinline element domyślnie, a białe znaki w przeciwnym razie powodują dziwne przepełnienia.

Opcja 2 - tabele. Działa, gdy nie znasz wysokości pierwszej części. Możesz użyć rzeczywistych <table>tagów lub zrobić to w fantazyjny sposób display: table. Ja wybiorę to drugie, ponieważ wydaje się, że jest teraz modne.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <div class="second-row">
    <iframe src="https://jsfiddle.net/about"></iframe>
  </div>
</div>
Rozwiń fragment kodu

Kilka uwag - overflow: autoupewnia się, że wiersz zawsze zawiera całą jego zawartość. W przeciwnym razie elementy pływające mogą czasami się przepełnić. Theheight: 100%W drugim rzędzie sprawia pewien, że rozszerza się jak może ściskając pierwszy wiersz tak małe, jak to się robi.

Opcja 3 - Flexbox. Najczystszy z nich wszystkich, ale z mniej niż gwiazdkową obsługą przeglądarki. IE10 będzie potrzebował -ms-prefiksów dla właściwości flexbox i cokolwiek mniej nie będzie go w ogóle obsługiwał.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Rozwiń fragment kodu

Niektóre uwagi - dzieje się overflow: hiddentak, ponieważ iframe nadal generuje pewien rodzaj przepełnienia, nawet display: blockw tym przypadku. Nie jest widoczny w widoku pełnoekranowym ani w edytorze fragmentów, ale małe okno podglądu ma dodatkowy pasek przewijania. Nie mam pojęcia, co to jest, iframe są dziwne.

Vilx-
źródło
@sproketboy Cóż, to zalecenie W3C. I to wcale nie jest najgorsze, nie na długą drogę.
John
Czy umieszczamy to w arkuszu stylów strony IFrame, czy w arkuszu stylów strony nadrzędnej zawierającej IFrame?
Mathias Lykkegaard Lorenzen
1
To jest niesamowite, dziękuję! Flexbox jest najczystszym rzeczywiście, ale stoły są również świetne do nauki i wydają się działać bez przelewów: jsfiddle.net/dmitri14/1uqh3zgx/2
Dmitri Zaitsev
1
Być może warto przenieść najnowsze aktualizacje na początek tej odpowiedzi. Musiałem przejść przez całą sprawę, aby uzyskać najlepszą odpowiedź, flexbox.
wybaczenie
2
@forgivenson - Wystarczająco prawdziwe. Dodano notatkę na początku tej odpowiedzi.
Vilx
68

Używamy JavaScript, aby rozwiązać ten problem; tutaj jest źródło.

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

Uwaga: ifmto identyfikator iframe

pageY() został stworzony przez Johna Resiga (autora jQuery)

MichAdel
źródło
49

Innym sposobem na to byłoby użycie position: fixed;węzła nadrzędnego.
Jeśli się nie mylę, position: fixed;przywiązuje element do rzutni, a zatem, gdy podasz ten węzeł width: 100%;i height: 100%;właściwości, obejmie on cały ekran. Od tego momentu możesz umieszczać <iframe>w nim znacznik i rozciągać go na pozostałą przestrzeń (zarówno na szerokość, jak i na wysokość) za pomocą prostej width: 100%; height: 100%;instrukcji CSS.

Przykładowy kod

    body {
        margin: 0px;
        padding: 0px;
    }

    /* iframe's parent node */
    div#root {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* iframe itself */
    div#root > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
   <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <div id="root">
                <iframe src="http://stackoverflow.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>
Rozwiń fragment kodu

D1SoveR
źródło
1
Jak to bierze „pozostałą” wysokość…?
EricG
3
Zauważyłem, że musisz także dodać position: fixedelement iframe.
0xF
dziękuję, naprawiłem wysokość mojego raportu SSRS, uniknąłem samobójstwa na kolejny dzień.
Mike D
1
nie widać pasków przewijania
andrej 21.04.16
idealnie - czy możesz wyjaśnić css '>' np. div # root> iframe dalej, ponieważ nie znam go i nie mogę znaleźć odniesienia
Datadimension
40

Oto kilka nowoczesnych podejść:

  • Podejście 2 - podejście Flexbox

    Przykład tutaj

    Ustaw displaywspólny element nadrzędny na flexwraz z flex-direction: column(zakładając, że chcesz, aby elementy układały się jeden na drugim). Następnie ustaw element flex-grow: 1potomny iframe, aby wypełnił pozostałą przestrzeń.

    body {
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.parent .banner {
    background: #f00;
    width: 100%;
    height: 30px;
}
.parent iframe {
    background: #000;
    border: none;
    flex-grow: 1;
}
    <div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>
    Rozwiń fragment kodu

    Ponieważ to podejście ma mniejsze wsparcie 1 , sugeruję skorzystanie z wyżej wymienionego podejścia.

1 Chociaż wydaje się, że działa w Chrome / FF, nie działa w IE (pierwsza metoda działa we wszystkich obecnych przeglądarkach).

Josh Crozier
źródło
3
Zarówno praca, jak i IMO, dwie wymienione tutaj opcje są najlepszym podejściem. Wolę tę flexboxopcję, ponieważ calcmusisz znać ilość miejsca do odliczenia od vh. Z flexboxprostym flex-grow:1robi to.
Kilmazing
39

Możesz to zrobić DOCTYPE, ale musisz użyć table. Sprawdź to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>
ducu
źródło
1
przynajmniej nie potrzebuje js !! ale czy jest bezpieczny w sieci?
Ali Shakiba,
1
minusem tego rozwiązania jest to, że html, body {overflow: hidden;} usunie zwoje strony.
Ali Shakiba
Próbuję dodać stopkę do powyższego kodu, ale stopka się nie wyświetla. czy możesz mi pomóc
Akshay Raut
18

Być może już na to odpowiedziano (kilka powyższych odpowiedzi to „poprawne” sposoby na zrobienie tego), ale pomyślałem, że po prostu dodam również moje rozwiązanie.

Nasz iFrame jest ładowany w div, dlatego potrzebowałem czegoś innego niż window.height. Widząc, że nasz projekt jest już w dużej mierze oparty na jQuery, uważam to za najbardziej eleganckie rozwiązanie:

$("iframe").height($("#middle").height());

Gdzie oczywiście „#middle” jest identyfikatorem div. Jedyną dodatkową rzeczą, którą musisz zrobić, to przywołać tę zmianę rozmiaru za każdym razem, gdy użytkownik zmieni rozmiar okna.

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});
Tim Geerts
źródło
7

Oto co zrobiłem. Miałem ten sam problem i godzinami szukałem zasobów w Internecie.

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

Dodałem to do sekcji głównej.

Pamiętaj, że mój iframe znajduje się w środkowej komórce tabeli, która ma 3 wiersze i 1 kolumnę.

Danut Milea
źródło
Twój kod będzie działał tylko TD zawierający IFRAME ma wysokość: 100%. Będzie działać, jeśli tabela jest zawarta w elemencie DIV, ponieważ masz styl, w którym wszystkie div mają mieć wysokość: 100%.
Nikola Petkanski
6

Kod MichAdel działa dla mnie, ale dokonałem drobnych modyfikacji, aby działał poprawnie.

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
    var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
asimrafi
źródło
4

Zgadza się, wyświetlasz ramkę iframe ze 100% wysokością względem pojemnika: ciała.

Spróbuj tego:

<body>
  <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
  <div style="width:100%; height:90%; background-color:transparent;">
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
    </iframe> 
  </div>
</body>

Oczywiście zmień wysokość drugiego diva na żądaną wysokość.

ARemesal
źródło
8
30px + 90%! = 100%
stepancheg
1
mógłby użyć obliczeń (100% - 30px) zamiast 90%
Justin E
4

spróbuj wykonać następujące czynności:

<iframe name="" src="" width="100%" style="height: 100em"/>

zadziałało dla mnie

sree
źródło
4
Nie wypełnia elementu nadrzędnego, po prostu umieszcza dużą ramkę iframe.
Ben
3

Możesz to zrobić za pomocą html / css w następujący sposób:

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>
vdbuilder
źródło
2

Nowości w HTML5: użyj calc (na wysokości)

<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>
Stefan Steiger
źródło
2

Użyłem tabeli display:, aby naprawić podobny problem. To prawie działa, pozostawiając mały pionowy pasek przewijania. Jeśli próbujesz wypełnić tę elastyczną kolumnę czymś innym niż iframe, to działa dobrze (nie

Weź następujący kod HTML

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

Zmień zewnętrzny div, aby użyć display: table i upewnij się, że ma ustawioną szerokość i wysokość.

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

Ustaw baner jako wiersz tabeli i ustaw jego wysokość zgodnie z własnymi preferencjami:

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

Dodaj dodatkowy div wokół elementu iframe (lub jakiejkolwiek innej zawartości, której potrzebujesz) i ustaw go jako wiersz tabeli o wysokości ustawionej na 100% (ustawienie jego wysokości ma kluczowe znaczenie, jeśli chcesz osadzić element iframe w celu wypełnienia wysokości)

.iframe-container {
  display: table-row;
  height: 100%;
}

Poniżej znajduje się jsfiddle pokazujący go w pracy (bez iframe, ponieważ wydaje się, że nie działa w skrzypcach)

https://jsfiddle.net/yufceynk/1/

daamsie
źródło
1

Myślę, że masz tutaj problem koncepcyjny. Mówiąc „Próbowałem ustawić wysokość: 100% w ramce iframe, wynik jest dość bliski, ale ramka iframe próbowała wypełnić całą stronę” , no cóż, kiedy „100%” nie było równe „całości”?

Poprosiłeś ramkę iframe o wypełnienie całej wysokości kontenera (którym jest ciało), ale niestety ma ona poziom siostry na poziomie <div> powyżej, o który prosiłeś, aby był duży na 30 pikseli. Zatem suma kontenera nadrzędnego jest teraz proszona o zmianę rozmiaru na 100% + 30px> 100%! Stąd paski przewijania.

Mam na myśli to, że chciałbyś, aby iframe zużywał to, co mogą pozostać jak ramki i komórki tabeli, tj. Wysokość = „*”. IIRC to nie istnieje.

Niestety, o ile mi wiadomo, nie ma sposobu na skuteczne mieszanie / obliczanie / odejmowanie jednostek bezwzględnych i względnych, więc myślę, że sprowadzasz się do dwóch opcji:

  1. Absolutnie umieść div, który wyjmie go z kontenera, aby sam iframe zużył wysokość kontenera. To jednak pozostawia wiele innych problemów, ale być może dla tego, co robisz, krycie lub wyrównanie byłoby w porządku.

  2. Alternatywnie musisz określić% div dla div i tak bardzo zmniejszyć wysokość ramki iframe. Jeśli bezwzględna wysokość jest naprawdę tak ważna, musisz zastosować ją do elementu podrzędnego div.

annakata
źródło
1

Po pewnym czasie wypróbowania trasy css, skończyło się na napisaniu w jQuery czegoś dość podstawowego, co spełniło moje zadanie:

function iframeHeight() {
    var newHeight = $j(window).height();
    var buffer = 180;     // space required for any other elements on the page 
    var newIframeHeight = newHeight - buffer;
    $j('iframe').css('height',newIframeHeight);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}

// When DOM ready
$(function() {
    window.onresize = iframeHeight;
}

Testowane w IE8, Chrome, Firefox 3.6

Ben B
źródło
1

Będzie działać z poniższym kodem

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
mgr
źródło
1

Podobna odpowiedź @MichAdel, ale używam JQuery i bardziej elegancko.

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id jest identyfikatorem tagu iframe

Roy Shmuli
źródło
0

Możesz to zrobić, mierząc rozmiar ciała podczas zdarzeń obciążenia / zmiany rozmiaru i ustawiając wysokość na (pełna wysokość - wysokość banera).

Zauważ, że obecnie w IE8 Beta2 nie możesz tego zrobić, ponieważ to zdarzenie jest obecnie uszkodzone w IE8 Beta2.

scunliffe
źródło
0

lub możesz przejść do starej szkoły i użyć zestawu ramek :

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
Amir Arad
źródło
2
@vdbuilder: Nie, to jest poprawne tylko przed HTML5. Założę się, że to nadal działa. ;-)
TJ Crowder
0

Chociaż zgadzam się, że JS wydaje się lepszą opcją, mam nieco działające rozwiązanie CSS. Wadą tego jest to, że jeśli często dodajesz zawartość do dokumentu HTML iframe, musisz dostosować jeden procent czasu minimalnego.

Rozwiązanie:

Staraj się nie podawać żadnej ZARÓWNO dokumentów HTML,

html, body, section, main-div {}

następnie zakoduj tylko to:

#main-div {height:100%;}
#iframe {height:300%;}

Uwaga: div powinien być twoją główną sekcją.

To powinno względnie działać. iframe dokładnie oblicza 300% widocznej wysokości okna. Jeśli zawartość HTML z 2. dokumentu (w ramce iframe) ma mniejszą wysokość niż 3-krotność wysokości przeglądarki, działa. Jeśli nie musisz często dodawać treści do tego dokumentu, jest to trwałe rozwiązanie i możesz po prostu znaleźć swój własny procent potrzebny w zależności od wysokości treści.

Działa to, ponieważ zapobiega dziedziczeniu przez drugi dokument HTML (ten osadzony) wysokości nadrzędnego dokumentu HTML. Zapobiega temu, ponieważ nie określiliśmy wysokości dla obu z nich. Kiedy dajemy% dziecku, szuka ono swojego rodzica, jeśli nie, to przyjmuje wysokość treści. I tylko jeśli inne pojemniki nie mają wysokości, z tego, co próbowałem.

pixelfe
źródło
0

Atrybut „ bezproblemowy ” to nowy standard mający na celu rozwiązanie tego problemu:

http://www.w3schools.com/tags/att_iframe_seamless.asp

Przypisując ten atrybut, usuwa on ramki i paski przewijania oraz dopasowuje rozmiar iframe do jego zawartości. chociaż jest obsługiwany tylko w Chrome i najnowszym Safari

więcej na ten temat tutaj: Bezproblemowy atrybut HTML5 iFrame

użytkownik2254487
źródło
Bezproblemowy atrybut został usunięty ze specyfikacji HTML 5.
Eric Steinborn,
0

Proste rozwiązanie jQuery

Użyj tego w skrypcie na stronie iframed

$(function(){

    if(window != top){
        var autoIframeHeight = function(){
            var url = location.href;
            $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
        }
        $(window).on('resize',autoIframeHeight);
        autoIframeHeight();
    }

}
UnLoCo
źródło
0

nie możesz ustawić wysokości elementu iframe w%, ponieważ wysokość ciała rodzica nie jest równa 100%, więc ustaw wysokość rodzica jako 100%, a następnie zastosuj wysokość elementu iframe 100%

For eg.
<html>
<head>
<style>
html,body{height:100%}
</style> 
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
Pravin Abhale
źródło
0

Jeśli masz dostęp do treści iframe, która zostanie załadowana, możesz powiedzieć jej rodzicowi, aby zmienił rozmiar, ilekroć zmieni rozmiar.

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

Jeśli na stronie znajduje się więcej niż jeden element iframe, może być konieczne użycie identyfikatora lub innych sprytnych metod w celu ulepszenia pliku .find („iframe”) w celu wybrania poprawnej.

Stephen
źródło
0

Myślę, że najlepszym sposobem na osiągnięcie tego scenariusza jest użycie pozycji css. ustaw pozycję względem rodzica div i pozycję: absolutnie do iframe.

.container{
  width:100%;
  position:relative;
  height:500px;
}

iframe{
  position:absolute;
  width:100%;
  height:100%;
}
<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>
Rozwiń fragment kodu

w przypadku innych kwestii wypełniania i marginesów css3 calc () jest teraz bardzo zaawansowany i w większości kompatybilny również ze wszystkimi przeglądarkami.

sprawdź calc ()

Jay Patel
źródło
0

Dlaczego tego nie zrobić (z niewielką korektą wyściółki / marginesów)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
Dostęp przyznany
źródło
Trzeba wymienić -0z +'px'na końcu. Czy to działa na urządzeniach mobilnych?
Dmitri Zaitsev