Div di intestazione rimane in alto, verticale a scorrimento div sotto con la barra di scorrimento solo allegata a quel div

Ho due div principali, l'intestazione e una lista a scorrimento contenuta in un div. Desidero che l'intestazione rimanga sempre nella parte superiore della pagina e nell'elenco di scorrimento in basso. La barra di scorrimento deve essere collegata al div di scorrimento e non all'intera pagina, ovvero la barra di scorrimento non viene visualizzata a destra dell'intestazione, ma solo il div di scorrimento.Div di intestazione rimane in alto, verticale a scorrimento div sotto con la barra di scorrimento solo allegata a quel div

Questo è quello che sto cercando di realizzare:

______________________ 
|_______header_______| 
|     |*| 
| Container Div |*| 
|     |*| 
|     |*| 
|     |*| 
|     |*| 
|     |*| 
---------------------- 

* = scrollbar

La presentazione deve essere fluido e se la finestra è allungata verticalmente, solo il div contenitore ed è barra di scorrimento dovrebbe ottenere più a lungo.

Non voglio posizionare l'intestazione position: fixed; come se la barra di scorrimento fosse a destra di esso anziché al di sotto di esso.

fonte

2012-03-13 Garywoo

'posizione: statico'? – Jon

HTML:

<div class="header">This is the header</div> 
<div class="content">This is the content</div>

CSS:

.header 
{ 
    height:50px; 
} 
.content 
{ 
    position:absolute; 
    top: 50px; 
    left:0px; 
    right:0px; 
    bottom:0px; 
    overflow-y:scroll;   
}

fonte

2012-03-13 03:23:20 bhamlin

fiddle: http://jsfiddle.net/n9P3X/1/ – valentinas

Grazie, è esattamente così, una soluzione così semplice, non so perché mi è sfuggito, haha. – Garywoo

Usa 'overflow-y: auto;' se esiste la possibilità che '.content' non raggiunga il fondo della pagina. In tal caso rimuoverà la barra di scorrimento. – Keith

Ecco un demo. Utilizzare position:fixed; top:0; left:0; in modo che l'intestazione rimanga sempre in primo piano.

#header { 
    background:red; 
    height:50px; 
    width:100%; 
    position:fixed; 
    top:0; 
    left:0;  
}.scroller { 
    height:300px; 
    overflow:scroll;  
}

fonte

2012-03-13 03:31:30 Dips

Questo non funzionerà con un'altezza di layout fluida impostata sul div principale (come 100%), grazie però. – Garywoo

è necessario utilizzare js ottenere una migliore altezza per div corpo

<html><body> 
<div id="head" style="height:50px; width=100%; font-size:50px;">This is head</div> 
<div id="body" style="height:700px; font-size:100px; white-space:pre-wrap; overflow:scroll;"> 
This is body 
T 
h 
i 
s 

i 
s 

b 
o 
d 
y 
</div> 
</body></html>

fonte

2012-03-13 03:35:37 PasteBT

trovato la magia flex.

Here 's un esempio di come fare un'intestazione fissa e un contenuto scorrevole. Codice:

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Holy Grail</title> 
    <!-- Reset browser defaults --> 
    <link rel="stylesheet" href="reset.css"> 
    </head> 
    <body style="display: flex; height: 100%; flex-direction: column"> 
    <div>HEADER<br/>------------ 
    </div> 
    <div style="flex: 1; overflow: auto"> 
     CONTENT - START<br/> 
     <script> 
     for (var i=0 ; i<1000 ; ++i) { 
      document.write(" Very long content!"); 
     } 
     </script> 
     <br/>CONTENT - END 
    </div> 
    </body> 
</html>

* Il vantaggio della soluzione flessibile è che il contenuto è indipendente da altre parti del layout. Ad esempio, il contenuto non ha bisogno di conoscere l'altezza dell'intestazione.

Per un'implementazione completa Holy Grail (intestazione, piè di pagina, nav, lato e contenuto), utilizzando il display flessibile, passare a here.

fonte

2015-10-23 07:04:14

questa è una soluzione geniale! questo è molto meglio di 100 vh – Student22

Div di intestazione rimane in alto, verticale a scorrimento div sotto con la barra di scorrimento solo allegata a quel div

risposta

Problemi correlati