Emulazione CSS pura di un set di frame

Ho cercato per più di 1 ora senza successo. Esiste un modo CSS puro di emulare un frameset? Voglio dire, davvero emulandolo. Ho trovato alcune cose interessanti in cui avrai fissato i blocchi superiore e inferiore, ma la barra di scorrimento per il contenuto è la normale barra di scorrimento del corpo del browser. Quello di cui ho bisogno è una barra di scorrimento solo per il blocco del contenuto, come farebbe un set di cornici.Emulazione CSS pura di un set di frame

Posso farlo funzionare assegnando overflow: auto alla mia area di contenuti div e impostando un'altezza fissa. Ma il problema è che non conosco le dimensioni della finestra del browser client senza usare javascript. E non voglio usare javascript per questo. Inoltre non posso usare le percentuali per le altezze in quanto il mio blocco superiore ha un'altezza fissa. Il blocco inferiore è quello che dovrebbe espandersi o restringersi a seconda dell'altezza della finestra del browser. Qualsiasi aiuto apprezzato. Grazie!

fonte

2010-08-08 Marcos Buarque

Che ne dici di qualcosa del genere?

HTML

<div id="header"> 
    <img src="logo.gif" alt="logo" /> 
    <h1 class="tagline">Oh em gee</h1> 
</div> 
<div id="content"> 
    <div id="content-offset"> 
     <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p> 
    </div> 
</div>

CSS

body, html { 
    margin: 0; padding: 0; 
    height: 100%; 
} 
#header { 
    height: 120px; 
    position: fixed; 
    top: 0; 
    background: red; 
    width: 100%; 
} 

#content { 
    height: 100%; 
    position: absolute; 
    top: 0; 
} 
#content-offset { 
    margin-top: 120px; 
    background: aqua; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    overflow: auto; 
}

fonte

2010-08-08 05:06:41 Marko

+1 soluzione geniale Marko, mi piace. – Gabriel

Hummm. Sembra interessante ... ci proverò adesso ... Grazie! –

Fammi sapere come va, l'ho testato solo nella mia testa :) – Marko

No. Penso che sarà necessario utilizzare javascript per ottenere le dimensioni della finestra per questo, a meno che non si imposti il blocco superiore su una dimensione% fissa, ad es. rendere il blocco superiore del 10% e il 90% inferiore.

fonte

2010-08-08 05:01:16

La risposta di Makro è vicino, ma non funziona bene. Il contenuto si sovrappone all'intestazione.

Per il punto, si desidera utilizzare position: fixed; per l'intestazione, non per il contenuto. Ciò rende anche l'involucro superfluo. Ecco un esempio di kickoff di base, puoi copiare'n'paste'n'run it.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3433129</title> 
     <style> 
      body { 
       margin: 0; 
       background: aqua; 
      } 
      #header { 
       position: fixed; 
       height: 120px; 
       width: 100%; 
       background: pink; 
      } 
      #content { 
       padding-top: 120px; /* Should be the same as #header height */ 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"> 
      <h1>Header</h1> 
     </div> 
     <div id="content"> 
      <p>Start of content.</p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p>End of content.</p> 
     </div> 
    </body> 
</html>

fonte

2010-08-08 05:22:12 BalusC

Si sovrappone all'intestazione, ma si noti il margine superiore sull'offset? a proposito, il padding viene aggiunto in cima alla larghezza/altezza, quindi il tuo #conten sarà 100% + 120px. – Marko

@Marko: l'altezza del 100% non dovrebbe essere stata lì al primo posto (non avrebbe funzionato anche perché il corpo/html non ha il 100% di altezza;)). Ho aggiornato la risposta. – BalusC

Grazie, ma la differenza rispetto a ciò di cui ho bisogno è che la barra di scorrimento per il blocco #content nel tuo esempio è in realtà la barra di scorrimento del browser. Ho bisogno di una barra di scorrimento che funzioni solo all'interno del blocco #content, come un automatico di overflow. –

Emulazione CSS pura di un set di frame

risposta

Problemi correlati