Absolute untere Position in Scroll div?

Fiddle Absolute untere Position in Scroll div?

Ich möchte meine Tasten an der Basis des Behälters auszurichten, so verwende ich:

.buttons{ 
    position: absolute; 
    bottom: 0; 
}

Das ist gut für, wenn es nicht viel Inhalt (die rosa div in der Geige), aber Wenn viel Inhalt vorhanden ist (das orange Div in der Geige), scrollt der Container und die Schaltflächen befinden sich nicht am unteren Rand des Containers.

Wie kann ich es haben, so dass die Schaltflächen am unteren Rand des Containers sind, wenn es nicht viel Inhalt hat und sie am unteren Rand der Rolle (unter dem Inhalt) sind, wenn es viel ist Inhalt.

Quelle

2015-05-19 panthro

Statt absolute Position sich 'Position: relative;' –

@ LuisP.A. Danke, aber beantwortet keine Frage. – panthro

@Vitorinofernandes danke, aber das beantwortet nicht die Frage - in der orangefarbenen Box sollten die Tasten unterhalb des Inhalts sein - am unteren Rand der Schriftrolle. – panthro

Sie müssen hinzufügen height:100% HTML und Körper und dann min-height:100% zu Ihrem Container wie folgt aus (ich habe noch ein paar Zeilen hinzugefügt, um es besser aussehen):

body, html {height:100%; margin:0;} 

* {box-sizing: border-box;} 
.container{ 
    min-height: 100%; 
    position: relative; 
    padding-bottom:30px; 
} 
p {margin:0;} 

.buttons{ 
    position: absolute; 
    bottom:0; 
} 

.pink{ 
    background: pink; 
} 

.tomato{ 
    background: tomato; 
}

Hier haben Sie die FIDDLE

(mehr Inhalt addieren es zu überprüfen)

EDITED (feste Höhe) gleiche Konzept Hinzufügen nur ein weiterer Container die min-height

NEW FIDDLE

Quelle

2015-05-19 15:13:24

Ummm ... Ich dachte an einen Container voller Höhe. Vielleicht nicht gültig, wenn du ein Vielfaches brauchst. Lass es mich wissen und ich denke anders. –

Danke, aber ich brauche den Container mit 200px Höhe. – panthro

Erstaunlich die schnell ausgelösten lächerlichen Downvotes. Ich habe meine Antwort so bearbeitet, dass sie Ihrer Körpergröße entspricht –

Ich habe einen .inner Behälter zu verwenden, die eine min-height hat. Wenn der Inhalt dort niedrig ist, wird der .inner-Container Ihre Schaltflächen nach unten schieben. Wenn der Inhalt mehr ist, wird der .innere Container mitwachsen.

.inner { 
    min-height: 149px; 
}

Beachten Sie auch, dass die Schaltflächen eine relative statt absolute Position haben. Wenn ein Element absolut ist, reagiert es nicht auf den Seiteninhalt.

https://jsfiddle.net/76gbfrah/10/

Quelle

2015-05-19 15:23:10 Mortaza

Absolute untere Position in Scroll div?

Antwort

Verwandte Themen