Element iFrame nie jest rozwijany do wysokości 100%

Mam to poniżej html. Chciałbym, aby iFrame zasłaniało resztę ekranu 100% na resztę. Próbowałem "100%" i "*" w atrybucie wysokości, ale nie działałem. Dlaczego? DziękiElement iFrame nie jest rozwijany do wysokości 100%

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    </head> 
    <body> 
     <div id="container-frame"> 
      <img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/> 
      <img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/> 
      <a id="if-username" href="/nvthoai">nvthoai</a> 
      <div id="if-box"> 
      </div> 
      <a id="if-close" href="http://www.yahoo.com" target="_top"> </a> 
      <div id="if-link"> 
      </div> 
      <div id="if-star"> 
      </div> 
     </div> 
     <iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      </html> 
     </iframe> 
    </body> 
</html> 



#container-frame { 
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0; 
height:35px; 
width:100%; 
}

Źródło

2009-08-12 HP.

Wysokość powodu: 100% nie działa, ponieważ% wysokości nie działa na dzieciach, których rodzice nie mają wyraźnej (nie%) wysokości. Więc to nie działa:

parent { 
    height: 60%; 
} 

child { 
    height: 100%; 
}

podczas gdy to robi:

parent { 
    height: 60em; 
} 

child { 
    height: 100%; 
}

Dziecko nie wie, co 60% oznacza, więc zamiast tego staje height: auto (wysokość zależy od zawartości statycznej wewnątrz niego).

Dziecko wie, jak obliczyć% 60em lub jakąkolwiek inną jawną jednostkę.

Istnieje kilka wyjątków od tej reguły. Jedną z nich jest sytuacja, gdy zarówno html, jak i elementy ciała mają wysokość: 100%, możesz użyć wysokości: 100% lub minimalnej wysokości: 100% na bezpośrednim potomku. (Możesz spróbować wysokości: 96% zgodnie z sugestią Pat, ale wiedz, że będzie to zupełnie inna wartość na ekranie/wysokość przeglądarki.) W nieoczekiwanych rozmiarach możesz stracić zawartość.)

O ile nie rozumiem kodu HTML, wygląda na to, że mają dwa bezpośrednie elementy podrzędne: element iframe i # frame-frame.

Możesz spróbować absolutnie pozycjonować # ramkę-kontenera u góry rzutni (dzięki czemu może ona siedzieć nad resztą strony, a przez "powyżej" mam na myśli "bliżej użytkownika na osi Z") , a jeśli element iframe nie jest ustawiony na 100% wysoki, ale może podoba się przykład Pat, 96% lub coś podobnego, możesz wtedy nadać elementowi iframe trochę górnego marginesu, aby zrobić wizualny pokój dla # ramki-kontenera. Jeśli tego nie zrobisz, górna część ramki iframe zostanie zasłonięta przez # ramki-kontenera, a ludzie przegapią górę. Wiedz, że nie możesz dodać górnego lub dolnego marginesu, dopełnienia, ramek itp. Do pola o wysokości 100%. To da ci coś więcej niż 100%!

Kolejny wyjątek od reguły wysokości z ogólnie pozycjonowanymi elementami. Mogą również mieć wysokość równą%, z wyjątkiem IE6. Więc możliwe, że absolutnie pozycjonowanie obu bezpośrednich dzieci może zadziałać, jeśli nie masz nic przeciwko hakowaniu dla IE6 lub nie dbasz o IE6. Generalnie nie lubię pozycjonowania wszystkiego na stronie, ale może to być najłatwiejsze w takim przypadku.

Źródło

2009-08-12 11:54:03

jak to wyjaśnić, dlaczego szerokość: 100% działa? – Brabbeldas

@Brabbeldas Szerokość i wysokość zachowują się z natury różne. Nie jest to nic innego jak moje pierwsze przypuszczenie, ale powiedziałbym, że przeglądarka ma możliwość określenia całkowitej szerokości strony (albo przez ograniczenie widoku, albo wyraźne szersze ustawienie), ale wysokość wzrośnie w miarę potrzeby, a zatem, o ile nie zostanie to wyraźnie zaznaczone, przeglądarka nie wie, co oznacza 100% –

Ten CSS powinno wystarczyć dla Ciebie:

body { 
    margin: 0; 
    padding: 0; 
    overflow-y: hidden; 
}

Następnie ustawić wysokość iframe do 96%. Spowoduje to, że nie zostanie on zepchnięty z dołu strony.

Powód jest taki, ponieważ 100% wysokość na elemencie iframe jest obliczana jako 100% dostępnej wysokości ekranu. Ponieważ powyżej elementu iframe znajduje się wysoki na 35 pikseli, kończy się to, że element iframe został przesunięty o 35 pikseli poza całkowitą wysokość ekranu.

Źródło

2009-08-12 03:04:20 Pat

Nadal mam problem. Strona jest tutaj, jeśli chcesz ją zobaczyć http://web.kucku.vn/u/D –

Tak, to działało dla mnie. Mój plik main.html ma dwie ramki: navigate.html i content.html. Użyłem powyżej CSS do stylizacji ciała main.html i zadziałało. – msinfo

-1

Można spróbować po prostu za pomocą <object> zamiast

Przykład:

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

pamiętać, że większość ludzi będzie odradzam używając dowolnego rodzaju oprawy (przy użyciu obiektu lub iframe), dla celów bezpieczeństwa.

Aktualizacja

zapomniałem! Może również istnieć sposób dynamicznego dopasowania iFrame za pomocą funkcji javascript uruchamianej po załadowaniu treści. Jest na to bardzo dobry przykład: here.

Źródło

2009-08-12 13:21:39

Element iFrame nie jest rozwijany do wysokości 100%

Odpowiedz

Powiązane problemy