web-dev-qa-db-fra.com

Le div d'en-tête reste en haut, le div à défilement vertical en dessous avec la barre de défilement uniquement attachée à ce div

J'ai 2 divs principaux, l'en-tête et une liste déroulante contenue dans un div. Je veux que l'en-tête reste toujours en haut de la page et la liste déroulante ci-dessous. La barre de défilement doit être attachée à la div de défilement et non à la page entière, c'est-à-dire que la barre de défilement n'apparaît pas à droite de l'en-tête, juste la div de défilement.

Voici ce que j'essaie de réaliser:

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

* = scrollbar

La disposition doit être fluide et si la fenêtre est étirée verticalement, seul le div du conteneur et sa barre de défilement doivent s'allonger.

Je ne veux pas positionner l'en-tête position: fixed; comme alors la barre de défilement sera à sa droite au lieu d'en dessous.

csslayoutheaderscroll
37
Garywoo

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;        
}​
50
bhamlin

J'ai trouvé la magie du flex.

Ici est un exemple de la façon de faire un en-tête fixe et un contenu défilant. Code:

<!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>

* L'avantage de la solution flex est que le contenu est indépendant des autres parties de la mise en page. Par exemple, le contenu n'a pas besoin de connaître la hauteur de l'en-tête.

Pour une implémentation complète Holy Graal (en-tête, pied de page, nav, côté et contenu), en utilisant l'affichage flexible, allez à ici .

11
AlikElzin-kilaka

Voici une démo . Utilisation position:fixed; top:0; left:0; pour que l'en-tête reste toujours en haut.

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

Vous devez utiliser js obtenir une meilleure hauteur pour la division du corps

<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>
0
PasteBT