2013-02-09 17 views
5

Mam problemy z ramkami iframe i Firefox. Zasadniczo osadzam ramkę IFrame w witrynie, która zajmuje całą powierzchnię ciała. Działa doskonale z Google Chrome, jak widać tutaj. Ramka I zajmuje cały obszar ciała, nie trzeba przewijać ramek do nawigacji po elemencie iframe.Fullsize IFrame w firefox?

chrome: http://i.stack.imgur.com/muo3U.png

Ale w firefox nie działa poprawnie. Jak widać, widoczna jest tylko część elementu iframe, a paski przewijania (są niewidoczne, ale działają przewijanie) muszą być używane do nawigacji po elemencie iframe. Jest to bardzo nieprzyjemne na potrzeby mojej strony internetowej.

Firefox: http://i.stack.imgur.com/6Vm1O.png

Więc zastanawiam się, jak mogę dostać tę pracę? Szukałem i szukałem, a wszystkie rozwiązania, które próbuję, nie działają.

Oto mój kod i inne, których próbowałem.

http://pastebin.com/rmdcnLuw

Dzięki za wszelką pomoc!

+0

http://www.pastebin.com/rmdcnLuw, herezje kod próbowałem, przepraszam oryginalny post zrobił daj mi zakładać więcej niż dwa linki. Jeszcze raz dziękuję za pomoc! – YourFriend

Odpowiedz

8

Musisz ustawić body i html elementy height: 100%

Spróbuj czegoś takiego:

<html style="height: 100%"> 
<body style="height: 100%"> 
    <div style="width:100%; height:100%; background-color:transparent;"> 
    <iframe src="http://www.google.com/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe> 
    </div> 
</body> 
</html> 

Jeszcze lepiej, dodać te zasady do pliku CSS jako takie:

body, html { height: 100%; } 

Można też spróbować:

CSS:

html, body { height: 100%; } 
iframe { width: 100%; height: 100%; } 

HTML:

<html> 
<body> 
     <iframe src="http://www.google.com" frameborder="0" scrolling="no"></iframe> 
</body> 
</html> 

alternatywna który porusza frameBorder i przewijanie do CSS

border: none; usuwa granicy na iframe, natomiast overflow: hidden; wyłącza przewijanie i ukrywa jakąkolwiek treść, która jest odcięta stronę (jak oryginalnego kodu).

CSS:

html, body { height: 100%; overflow: hidden; } 
iframe { width: 100%; height: 100%; border: none; overflow: hidden; } 

HTML:

<html> 
<body> 
     <iframe src="http://en.wikipedia.org"></iframe> 
</body> 
</html> 
+0

Dzięki za odpowiedź! Niestety żadna z tych opcji nie zadziałała:/firefox po prostu nie chce tego przestrzegać>. <. – YourFriend

+0

Dziwne. To działa dla mnie. Kod, który podałeś na pastebin - czy cały kod? –

+0

Oto kod w akcji: http://chrismorris.org/eg_iframe_stretch.html –

1

spróbować to w ur css:

iframe { display:block; width:100%; border:none;} 
+0

'scrolling =" no "' jest atrybutem HTML, a nie CSS.Być może myślisz o 'przepełnieniu: ukrytym;' –

+0

@ChrisMorris, dziękuję za sugestię. Zmieszałem różne rzeczy. teraz to zmieniłem. – Dhwani

+0

Dzięki za odpowiedź! Smutne stosowanie tego css nie zmienia niczego w firefox: /, po prostu pokazuje pierwszą czwartą górną część strony wewnątrz iframe. – YourFriend

Powiązane problemy