CSS-HTML-Überlauf Problem mit statischen Header in Wrap

Ich bin mit dem unteren Teil des überfüllten Inhalts wie in der Geige zu kämpfen. Wie würdest du das beheben und dabei dieses Layout beibehalten?CSS-HTML-Überlauf Problem mit statischen Header in Wrap

http://jsfiddle.net/Sa6cb/392/

CSS:

.wrapper { 
    overflow-y: hidden; 
    overflow-x: hidden; 
    border: 1px solid #000; 
    height: 200px; 
    width: 200px; 
} 

.wrappedheader { 
    position: static; 
    border-bottom: 1px solid #000; 
    padding: 15px; 
} 

.wrappedbody { 
    position: relative; 
    overflow-y: auto; 
    height: 100%; 
    padding: 15px; 
}

HTML:

<div class="wrapper"> 
    <div class="wrappedheader"> 
    This is a header 
    </div> 

    <div class="wrappedbody"> 
    <!-- Content causing overflow-y --> 
    </div> 

</div>

Quelle

2016-07-15 SadBoi2000

in welcher Weise Struggling? Versuchen Sie, die Bildlaufleiste vollständig sichtbar zu machen? Wenn ja, ist die Antwort http://jsfiddle.net/MrLister/Sa6cb/396/ –

Danke, das hat es getan. Edit: Nicht sicher, ob ich es verstehe, warum subtrahieren wir genau 61px? Und gibt es keine robustere Methode, die keine Berechnungen verwendet, die funktionieren würden? – SadBoi2000

Polsterungen. 15px mal 4. Siehe auch @ feihcsims Antwort. Muss jetzt gehen, Entschuldigung. –

Ihre wrappedbody hat eine Höhe von 100%, was 100% seiner Eltern ist, Wrapper. Wrapper hat jedoch zwei Kinder, wrappedbody und wrappedheader. Die Höhe des wrappedbody sollte die Höhe der Wrapper minus der Höhe von wrappedheader sein:

.wrappedbody { 
    position: relative; 
    overflow-y: auto; 
    height: calc(100% - 79px); /* 79 = wrappedheader height + wrappedbody padding*/ 
    padding: 15px; 
}

http://jsfiddle.net/feihcsim/14auqpqd/

Quelle

2016-07-15 18:41:16 feihcsim

Sie nehmen an, dass die Zeilenhöhe des Headers 18px ... –

ist. Danke. Das Problem ist, dass sich die Höhe des Headers in meinem Problem dynamisch ändert, so dass ich die Höhe davon nicht kenne. – SadBoi2000

Dann verschieben Sie die Höhenbeschränkung von Wrapper zu wrappedbody http://jsfiddle.net/feihcsim/14auqpqd/1/ – feihcsim

CSS-HTML-Überlauf Problem mit statischen Header in Wrap

Antwort

Verwandte Themen