Schieben Sie ein "fixed height div" nach oben, das eine Webseite horizontal aufteilt?

Question

Ich brauche eine Box, die vom unteren Rand meiner Seite nach oben gleitet. Ich werde die Box verwenden, um neuen Benutzern wichtige Informationen zu zeigen. So wird zum Beispiel unmittelbar nach der Anmeldung die Box mit einer Willkommensnachricht nach oben verschoben.

Ich habe gemacht this jsfiddle, dass bis zu einem gewissen Grad das gewünschte Verhalten beispielhaft darstellt. Es ist nur ein div, die von unten gerutscht aufsteht:

$('.foot').addClass('slide-up', 500, 'easeOutBounce'); 

Allerdings wird der Code nur beispielhaft, da die Implementierung aus folgenden Gründen nicht ausreichend ist:

1. Das untere Feld a hat im Voraus festgelegt 500px Höhe, weil es zunächst 500px unter dem Browser versteckt ist. Stattdessen brauche ich nur die Boxhöhe, um ihren Inhalt anzupassen. Der Inhalt wird variieren und wird nach dem Laden sogar durch Javascript geändert.

2. Die untere Box erscheint oben auf anderen Elementen. Stattdessen möchte ich den Bildschirm in zwei teilen. Eine untere Hälfte, die so viel Höhe wie der Inhalt der Box hat. Und eine obere Hälfte, die sich wie eine normale Webseite verhält, d. H. Wenn es zu viel Inhalt gibt, kann der Benutzer einfach nach unten scrollen. Zur Veranschaulichung der Wirkung beschrieben Sie überprüfen können this jsfiddle (the code has no relevance though)

Wie konnte das beschriebene Verhalten erreichen?

Answer 1

Nach dem Experimentieren mit verschiedenen Methoden, endete ich mit einer Lösung, die einige Ideen in Freedomm-n Kommentare (ändern Sie die Größe der Haupt-Div) und in Nikhil Antwort (verwenden Sie einen Flex-Container) kombiniert. Sie können das Ergebnis in diesem jsfiddle sehen.

Für das folgende Markup:

<div id="divContainer"> 
    <div id="divTop"> 
     Main content 
    </div> 
    <div id="divFooter"> 
     Footer content 
    </div> 
</div> 

Und diese Stile:

html, body, form 
{ 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    height: 100%; 
} 
#divContainer 
{ 
    width: 100%; 
    height: 100%; 
} 
#divTop 
{ 
    overflow-y: auto; 
    padding: 8px; 
    height: calc(100vh - 16px); /* Accounts for padding and border (if any) */ 
} 
#divFooter 
{ 
    padding: 12px; 
    text-align: center; 
    border: 1px solid black; 
    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; 
} 
.containerEnd 
{ 
    display: flex; 
    flex-direction: column; 
} 
.topEnd 
{ 
    height: auto; 
    flex-grow: 1; 
} 

Dieser Code Javascript verwendet, um die div-Elemente zu animieren:

function slideUpFooter() { 
    var currentHeight = $('#divTop').height(); 
    var footerHeight = $('#divFooter').outerHeight(true); 
    $('#divTop').animate(
     { height: currentHeight - footerHeight }, 
     2000, 
     'easeOutBounce', 
     function() { 
      $('#divContainer').addClass('containerEnd'); 
      $('#divTop').addClass('topEnd'); 
     }); 
}; 

Die Funktion bei der angerufene Ende der Animation legt die Flexbox-Parameter fest, um sicherzustellen, dass der Fuß an der Unterseite klebt o f die Seite.

Answer 2

Ich habe aktualisiert your Fiddle. Suchen Sie unten nach Details.

Sie müssen nicht position: fixed für die .foot Abschnitt verwenden, können Sie stattdessen position: relative verwenden. Da ich bemerkt habe, dass du Flex benutzt hast, habe ich mir die Freiheit genommen, das zu beheben.

vorgenommene Änderungen

• Zunächst schlage ich einen div Container hinzufügen, einen Klassennamen sagen geben - container.
• Machen Sie den Container display: flex & ändern Sie die Standardrichtung zu flex-direction: column.
• Nun, da Sie wollen, dass die main-content je nach seinem Inhalt Scroll-Lage sein, müssen Sie zuerst eine Höhe mit height: 200px;auf diesem Abschnitt eingestellt und dann Make-Lage blättern mit overflow-y: auto;

Lass es mich wissen, wenn du irgendwelche Zweifel hast.