1. Accueil
  2. Question et réponse
  3. Div ignorer les propriétés de hauteur et de débordement

Div ignorer les propriétés de hauteur et de débordement

2017-06-20 12 views
1

J'essaie de faire une div avec un height: calc(100% - 80px) et un overflow: scroll. La div ignore complètement ces deux règles. Voici ce que j'ai essayé:Div ignorer les propriétés de hauteur et de débordement

.tab-content { 
 
    clear: both; 
 
    height: calc(100% - 80px); 
 
    overflow: auto; 
 
} 
 

 
#tutorial { 
 
    padding: 5%; 
 
}
Tutorial 
 

 
<div id="tutorial" class="tab-content"> 
 
    Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
</div>

S'il vous plaît me alerter où je me trompe et comment résoudre le problème.

Source

2017-06-20 Anonymous

+0

'calc (100% - 80px);' il n'y aura pas de débordement, comment pourriez-vous faire défiler? –

+0

@DanielH le contenu pourrait déborder la div, c'est alors qu'il y aurait défilement. –

+0

cela fonctionne déjà? https://jsfiddle.net/dalinhuang/h6Lam4rr/ –

Répondre

0

Je dirais que vous voulez faire de la div 100% - 80px la hauteur de la fenêtre actuelle. Pour cela, vous pouvez utiliser 100vh

.tab-content { 
 
    clear: both; 
 
    height: calc(100vh - 80px); 
 
    overflow: auto; 
 
    background: aqua; 
 
} 
 

 
#tutorial { 
 
    padding: 5%; 
 
}
Tutorial 
 

 
<div id="tutorial" class="tab-content"> 
 
    Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
</div>

Source

2017-06-20 17:00:37

0

Le problème que vous rencontrez est que les balises html et body sont automatiquement dimensionnées à la hauteur de leur contenu. Si vous voulez implémenter une barre de défilement sur la div interne, vous devez établir un débordement, sinon il n'y a pas de débordement.

html, body { 
 
    height: 100%; 
 
} 
 
.tab-content { 
 
    background-color: rgba(0,0,0,0.15); 
 
    clear: both; 
 
    height: 100px; 
 
    height: -webkit-calc(100% - 80px); 
 
    height: -moz-calc(100% - 80px); 
 
    height: calc(100% - 80px); 
 
    overflow: scroll; 
 
} 
 

 
#tutorial { 
 
    padding: 5%; 
 
}
Tutorial 
 

 
<div id="tutorial" class="tab-content"> 
 
    Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
</div>

Source

2017-06-20 16:47:54 Ryan

 Questions connexes

  • Aucun problème connexe^_^