web-dev-qa-db-fra.com

Barre de défilement sans hauteur fixe/hauteur dynamique avec barre de défilement

J'ai cette structure HTML:

<div id="body">
    <div id="head">
        <p>Dynamic height without scrollbar</p>
    </div>
    <div id="content">
        <p>Dynamic height with scrollbar</p>
    </div>
    <div id="foot">
        <p>Fixed height without scrollbar</p>
    </div>  
</div>

Je veux avoir les trois parties à l'intérieur de la partie principale (#body) sans débordement. J'ai donc besoin d'une barre de défilement dans la partie centrale.

J'ai essayé ce CSS:

#content{
    border: red solid 1px;
    overflow-y: auto;
}

Et ça:

#content{
    border: red solid 1px;
    overflow-y: auto;
    height: 100%;
}

Mais ni l'un ni l'autre ne fonctionne.

J'ai fait un exemple à JSFiddle .

Puis-je faire cela avec seulement CSS et HTML? Je préférerais éviter le Javascript.

htmlcssscrollbar
26
GuillaumeS

Flexbox est une alternative moderne qui vous permet de le faire sans hauteur fixe ni JavaScript.

Définir display: flex; flex-direction: column; sur le conteneur et flex-shrink: 0; sur les entêtes et pieds de page fait l'affaire:

http://jsfiddle.net/cvmrvfhm/1/

42
mtyaka

Vous devrez spécifier une hauteur fixe, vous ne pouvez pas utiliser 100% car il n'y a rien pour comparer cela, comme dans height=100% de quoi?

Violon édité:

http://jsfiddle.net/6WAnd/4/

5
Philip Bevan

Utilisez ceci:

style = "hauteur-maximum: 300px; débordement: auto;" 

Pour éviter une hauteur fixe

4
Sanchi Girotra

La réponse du SC à cette question est la suivante:

http://jsfiddle.net/6WAnd/20/

ou quelque chose de similaire

2
Philip Bevan

Une approche rapide et propre utilisant très peu de padding JS et CSS: http://jsfiddle.net/benjamincharity/ZcTsT/14/

var headerHeight = $('#header').height(),
    footerHeight = $('#footer').height();

$('#content').css({
  'padding-top': headerHeight,
  'padding-bottom': footerHeight
});
2
Benjamin
 <div id="scroll">
    <p>Try to add more text</p>
 </div>

voici le code css

#scroll {
   overflow-y:auto;
   height:auto;
   max-height:200px;
   border:1px solid black;
   width:300px;
 }

voici la démo JSFIDDLE

2
user4148647

Si vous voulez avoir le défilement vertical, vous devez impliquer une hauteur fixe dans une certaine mesure. Si vous ne souhaitez pas définir une hauteur fixe sur l'élément en question ou sur son parent, il existe une autre option - définir la hauteur fixe sur ses frères et soeurs. Alors, vous aurez laissé dire quelques frères et sœurs avec une hauteur de 200px en résumé et votre élément aura height: calc(100% - 200px); De cette façon, vous rendrez la hauteur de votre élément dynamique et vous aurez ce qu’il faut pour utiliser overflow-y: auto; et pour obtenir le défilement désiré.

<div id="body">
<div id="head">
    <p>Fixed size without scrollbar</p>
    <p>Fixed size without scrollbar</p>
</div>
<div id="content">
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
</div>
<div id="foot">
    <p>Fixed size without scrollbar</p>
    <p>Fixed size without scrollbar</p>
</div>  

#body {
    width: 300px;
    border: black dashed 2px;
    height: 400px; /*this is need only for the sake of the example. 
In the real code you will have height set by some ascendant element or 
at last throght the chain by the window  */
    overflow: hidden;
}
    
#head {
    height: 150px;
    background: red;
}

#content{
    overflow-y: auto;
    height: calc(100% - 200px)
}

#foot {
    height: 50px;
    background: blue;
}
0
P.Petkov

Je ne sais pas si j'ai bien compris, mais est-ce que ceci résout votre problème?

Je viens de changer le overflow-y: scroll;

#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 100px;
}

Édité

Essayez ensuite d’utiliser des pourcentages comme celui-ci: http://jsfiddle.net/6WAnd/19/

CSS balisage:

#body {
    position: absolute;
    top; 150px;
    left: 150px;
    height: 98%;
    width: 500px;
    border: black dashed 2px;
}    
#head {
    border: green solid 1px;
    height: 15%;
}
#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 70%;
}
#foot {
    border: blue solid 1px;
    height: 15%;
}
0
Luis

Utilisez ceci:

#head {
    border: green solid 1px;
    height:auto;
}    
#content{
            border: red solid 1px;
            overflow-y: scroll;
            height:150px;       
        }
0
Uttara

J'ai un problème similaire avec le contenu PrimeNG p_Dialog et je fixe par style ci-dessous pour le contentStyle

height: 'calc(100vh - 127px)'
0
El Ghandor Yasser

Avec la grille d'affichage, vous pouvez ajuster dynamiquement la hauteur de chaque section.

#body{
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
}

Ajoutez le code ci-dessus et vous obtiendrez les résultats souhaités.

Parfois, lorsque de nombreux niveaux de grilles sont impliqués, les CSS ne limitent pas votre contenu à 1fr. Dans de tels scénarios, utilisez:

#content{
  max-height:100%;
}
0
Aseem