iFrame altezza 100% provoca la barra di scorrimento verticale

Vedo un sacco di domande sugli IFrame di altezza 100% ma nessuno sembra avere lo stesso identico problema di me.iFrame altezza 100% provoca la barra di scorrimento verticale

Quello che voglio fare è avere un iFrame che copra l'intera finestra, senza barre di scorrimento, senza impostazione di overflow: nascosto sul corpo.

Ottiene un margine inferiore di 5px sul mio iFrame che non scompare con css e causa una scroolbar verticale. Il consiglio standard sembra essere l'overflow: nascosto sul corpo, ma in realtà non risolve il problema, e non è abbastanza per me.

Ecco un semplicissimo jsFiddle example. (notare le doppie barre di scorrimento verticali)

Questo comportamento è lo stesso per Chrome 15, IE9 e FF9.

fonte

2012-02-03 Per Salbark

Non è l'iframe che produce la barra di scorrimento, è lo spazio bianco dopo che

<iframe src="http://www.bbc.co.uk" frameborder="0"></iframe> 
    <!-- Whitespace here; This is being rendered! --> 
</body>

Se non si vuole vedere, utilizzare

* { line-height: 0; }

modifica: il problema persiste se si rimuovono gli spazi bianchi, ma la soluzione è la stessa. Gli iframe sono resi come elementi incorporati per impostazione predefinita (iframe = 'inline frame'), e quindi hanno un'altezza di riga che causa il problema.

In alternativa, si consiglia di provare iframe { display: block; } o una combinazione di entrambe le soluzioni.

fonte

2012-02-03 16:04:31 user123444555621

In Chrome, quando destra-cliccato bianco-spazio e scelto ** Inspect Element **, l'elemento 'html' all'interno del' IFRAME' è stato selezionato tra gli elementi scheda ** **. Ho aggiunto uno screenshot alla mia risposta. –

@davegrove Non sono sicuro che l'ispettore sia preciso al 100%. – user123444555621

Provato negli altri due browser (Firefox e IE) e ispezionando evidenzia lo stesso elemento. Fai un tentativo, cosa evidenzia per te? –

Aggiornamento:

esempio di lavoro in chrome 16.0.*, firefox 10.* (apparentemente IE9 agisce su e visualizza una barra di scorrimento in entrambi i casi - o un disabile uno se l'altezza è impostata al 99% o uno attivo che non può scorrere se l'altezza è al 100%):

luogo quanto segue in un file html e aprirlo (non so cosa sta facendo jsfiddle diversa, ma non funziona allo stesso modo)

<style> 
* { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    /*overflow: auto;*/ /* not needed, this is the default value*/ 
} 
</style> 
<iframe src="http://www.bbc.co.uk" frameborder="0"/>

fonte

2012-02-03 13:21:14 Bogdan

grazie, ma che non è proprio quello che voglio. Forse non ero chiaro nella mia domanda. Voglio che l'iFrame riprenda l'intera altezza del viewport (e la larghezza, ma è facile). La tua soluzione non lo fa. Andrò avanti e modificherò la mia domanda in modo che anche altri non capiscano l'idea sbagliata. –

Non funziona su Firefox 9.0.1 qui. –

k, i studieremo – Bogdan

non

vedere una barra di scorrimento verticale di fuori di jsFiddle con questo:

<html> 
<head> 
<style> 
body { 
    padding: 0; 
    margin: 0; 
} 

iframe { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
} 
</style> 
</head> 
<body> 
    <iframe src="http://www.bbc.co.uk" frameborder="0"/> 
</body> 
</html>

EDIT: Ecco un frammento da sotto le Elementi schede di ciò che viene selezionato quando ho ispezionare il white-space in Chrome.

Developer Tools Snip

fonte

2012-02-03 13:25:46

Sì, mi dispiace di non essere abbastanza chiaro. Se il mio altro commento e le mie modifiche alla domanda. –

Ermm :-), non sono sicuro del perché questo non si adatta al conto. Ho modificato la mia risposta per impostare la larghezza e includere una fonte per l'iframe. L'iframe stesso riempie l'intera vista-porta e non c'è uno stile di overflow sul documento che lo contiene. –

Penso che il divario '5px' che stai vedendo appartiene al documento contenuto nell 'iframe'. Posso confermarlo, se fai clic con il pulsante destro del mouse su Chrome e scegli ** Inspect Element ** puoi vederlo da solo. –

Per riassumere:

spazio bianco prima cause 4PX spazio bianco alla rigth del iframe.
spazio bianco dopo csuses 4px spazio bianco dopo l'iframe.

Ciò è dovuto al carattere linea di iframe come indicato nel primo post.

fonte

2012-06-12 08:53:59 Poisson

Per evitare che la barra di scorrimento provare questo:

CSS:

html, body { height:100%; margin:0;} 
.bdr { border: thick solid grey } 
.h100 { height:100%;} 
.w100 { Width: 100% } 
.bbox { box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
     } 
.vat { font-size: 0; vertical-align:top}

HTML:

<body class="bbox"><!-- no WS here--><iframe  
      class="bdr h100 w100 vat bbox" name="iframe1" 
      src="http://www.bbc.co.uk"> </iframe><!--no WS here either--></body>

Lo stile .bbox impedisce div sub di crescere. .Vat è necessario per IE e Firefox. Un'alternativa per .vat è: display: block. Oppure display: inline-block + verticale allineamento: top .brd è a scopo dimostrativo.

fonte

2012-06-13 16:36:26 poisson

iFrame altezza 100% provoca la barra di scorrimento verticale

risposta

Problemi correlati