Se si guarda alla their CSS, usano height: 100% per il iframe:
iframe#diggiFrame {
color: #666;
width: 100%;
height: 100%;
z-index: 10;
-webkit-box-sizing: border-box;
}
Essi posizionare il DiggBar sopra che con un'altezza di 46px, in modo che il iframe prende il 100% dello spazio rimanente. Utilizzano overflow: hidden sull'elemento body per mantenere il valore iframe interamente all'interno dell'altezza verticale della pagina, anziché consentire lo scorrimento della pagina. Ciò significa che la barra di scorrimento verrà visualizzata all'interno di iframe, anziché per l'intera pagina. Si noti che il modo in cui funziona DiggBar funziona solo in modalità strane in Firefox; vedi sotto per come farlo in modalità standard.
body {
padding: 46px 0 0 0;
margin: 0;
background: #fff;
overflow: hidden;
color: #333;
text-align: left;
}
#t {
width: 100%;
min-width: 950px;
height: 46px;
z-index: 100;
position: absolute;
top: 0;
left: 0;
/* overflow: hidden; */
border-bottom: 1px solid #666;
background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
line-height: 1;
}
modificare: Per coloro che non mi credete, ecco un small example. Per farlo riempire l'intero spazio, è necessario impostarlo in modo che non contenga alcun bordo, e non è necessario che lo <body> non abbia margini.
modifica 2: Ah, scusa, vedo di cosa stavi parlando. È necessario lo overflow: hidden sul tag body per far funzionare la barra di scorrimento nel modo desiderato.
modifica 3: Sembra che tu debba essere in modalità strane perché funzioni in Firefox; se includi una dichiarazione <!DOCTYPE html>, questo ti porta in modalità standard e il tuo iframe risulta troppo piccolo.
modifica 4: Ah, lo puoi fare anche in modalità standard in Firefox. Hai la risposta here. È necessario impostare l'altezza sugli elementi <html> e <body> su 100%.(Si noti che lo <!DOCTYPE html> è il doctype per HTML 5, che è un lavoro in corso, tuttavia, funziona su tutti i browser moderni per attivare la modalità standard).
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
html, body {
height: 100%
}
body {
margin: 0;
overflow: hidden;
}
#topbar {
height: 50px;
width: 100%;
border-bottom: 1px solid #666
}
#iframe {
height: 100%;
width: 100%;
border-width: 0
}
</style>
</head>
<body>
<div id="topbar">
<h1>This is my fake DiggBar</h1>
</div>
<iframe id="iframe" src="http://www.google.com/"></iframe>
</body>
non funzionano in questo modo. Prova tu stesso, imposta un iframe con altezza: 100% e imposta il suo src su http://gooogle.com. Non funzionerà. – KingNestor
La maggior parte delle persone finisce per ricorrere a javascript per farlo, ma fallisce quando prova a farlo per un iframe con un set src su un sito attraverso un dominio diverso. Sono curioso di sapere come lo fanno anche loro. – KingNestor
height 100% lo espande all'altezza del tag body, che non è l'altezza del contenuto ifram e nella maggior parte dei casi sarà troppo piccolo. – KingNestor