1. Zuhause
  2. Frage und Antwort
  3. Div ignoring Höhe und Überlauf Eigenschaften

Div ignoring Höhe und Überlauf Eigenschaften

2017-06-20 3 views
1

Ich versuche, ein div mit einem height: calc(100% - 80px) und einem overflow: scroll zu machen. Das div ignoriert beide Regeln vollständig. Hier ist, was ich versucht habe:Div ignoring Höhe und Überlauf Eigenschaften

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

Bitte benachrichtigen Sie mich über wohin ich gehe falsch und wie das Problem zu beheben.

Quelle

2017-06-20 Anonymous

+0

'ber (100% - 80px) verwenden,' es nicht überlaufen sein wird, wie könnte Sie bewegen? –

+0

@DanielH der Inhalt könnte das Div überlaufen, das ist, wenn es scroll würde. –

+0

es funktioniert bereits? https://jsfiddle.net/dalinhuang/h6Lam4rr/ –

Antwort

0

Meine Vermutung wäre, Sie die div 100% - 80px Höhe das aktuelle Fenster machen wollen. Dafür könnten Sie 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>

Quelle

2017-06-20 17:00:37

0

Das Problem, das Sie haben, ist, dass die HTML- und Body-Tags automatisch auf die Höhe ihres Inhalts angepasst werden. Wenn Sie eine Bildlaufleiste auf dem internen Div implementieren möchten, müssen Sie einen Überlauf einrichten, sonst gibt es keinen Überlauf.

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>

Quelle

2017-06-20 16:47:54 Ryan

Verwandte Themen

 Verwandte Themen