iFrame non espande al 100% di altezza

Ho questo sotto html. E vorrei che l'iFrame coprisse il resto dello schermo con il 100% su qualsiasi cosa rimanesse. Ho provato "100%" e "*" in attributo altezza ma non funziona. Perché? GrazieiFrame non espande al 100% di altezza

<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%; 
}

fonte

2009-08-12 HP.

L'altezza motivo: il 100% non funziona perché le altezze% non funzionano su bambini i cui genitori non hanno un'altezza esplicita (non%). Quindi questo non funziona:

parent { 
    height: 60%; 
} 

child { 
    height: 100%; 
}

mentre questo fa:

parent { 
    height: 60em; 
} 

child { 
    height: 100%; 
}

bambino non sa cosa significa il 60%, così invece diventa height: auto (altezza determinata dal contenuto statico al suo interno).

Bambino sa come calcolare un% di 60em o qualsiasi altra unità esplicita.

Ci sono alcune eccezioni a questa regola. Uno è dove quando entrambi gli elementi html e body sono dati in altezza: 100%, puoi usare height: 100% o min-height: 100% su un bambino diretto. (Potresti provare l'altezza: 96% come suggerito da Pat ma sappi che saranno valori completamente diversi per altezza schermo/browser. A dimensioni inattese potresti perdere contenuto.)

A meno che non stia interpretando male l'HTML, sembra che tu avere due figli diretti: l'iframe e il # frame-frame.

Si potrebbe provare assolutamente il posizionamento # contenitore-frame nella parte superiore della finestra (in modo che possa sedersi sopra il resto della pagina e con "sopra" intendo "più vicino all'utente sull'asse z") , e se l'iframe non è impostato al 100% in alto ma forse come l'esempio di Pat, al 96% o qualcosa del genere, potresti quindi dare all'iframe un po 'di padding in alto per creare spazio visivo per # frame-frame. Se non lo fai, la parte superiore dell'iframe verrebbe oscurata da # frame-frame e la gente perderebbe la parte superiore. Sappi che non puoi aggiungere margini superiori o inferiori, padding, bordi, ecc. A una casella alta 100%. Questo ti darebbe qualcosa di più del 100%!

Un'altra eccezione alla regola di altezza% è con elementi posizionati in generale. Possono anche avere un'altezza di%, eccetto che IE6 ha problemi con questo. Quindi, possibilmente, posizionare entrambi i bambini diretti può funzionare, se non ti dispiace hacking per IE6 o non ti interessa di IE6. Generalmente non mi piace posizionare tutto su una pagina, ma potrebbe essere più semplice in un caso come questo.

fonte

2009-08-12 11:54:03

come spiega perché una larghezza: il 100% funziona? – Brabbeldas

@Brabbeldas Larghezza e altezza si comportano in modo diverso. Questo non è altro che la mia prima ipotesi, ma direi che il Browser ha la capacità di determinare la larghezza totale della pagina (sia con il limite della finestra o con un'impostazione più ampia esplicita), ma l'altezza crescerà secondo necessità e quindi, a meno che non venga indicato esplicitamente, il browser non può sapere cosa significa 100% –

Questa CSS dovrebbe fare il trucco per voi:

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

quindi impostare l'altezza del iframe al 96%. Ciò impedirà che venga spinto fuori dalla parte inferiore della pagina.

Il motivo per cui è necessario questo è perché l'altezza del 100% sull'iframe viene calcolata come il 100% dell'altezza dello schermo disponibile. Dato che hai un div 35px sopra l'iframe, finisci con un iframe spinto 35px oltre l'altezza totale dello schermo.

fonte

2009-08-12 03:04:20 Pat

Ho ancora problemi. Il sito web è qui se vuoi vederlo http://web.kucku.vn/u/D –

Sì, questo ha funzionato per me. Il mio main.html ha due frame, navigate.html e content.html. Ho usato sopra CSS per lo styling del corpo main.html e ha funzionato. – msinfo

-1

Si potrebbe provare semplicemente usando <object> invece di

Esempio:

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

Si noti che la maggior parte delle persone si consiglia di non usare alcun tipo di inquadratura (con oggetto o iframe), per motivi di sicurezza.

Aggiornamento

ho dimenticato! Potrebbe anche esserci un modo per regolare l'iFrame in modo dinamico utilizzando una funzione javascript che viene eseguita dopo il caricamento del corpo. C'è un ottimo esempio di esso here.

fonte

2009-08-12 13:21:39

iFrame non espande al 100% di altezza

risposta

Problemi correlati