Slide up a "fixed height div" that splits a web page horizontally?

Question

I need a box that slides up from the bottom of my page. I will use the box to show important information to new users. So for example, immediately after signup, the box will slide up with a welcome message.

I've made this jsfiddle that to some extend exemplifies the desired behaviour. It's just a div that gets slided up from the bottom:

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

However, the code is only to exemplify, because the implementation is insufficient for the following reasons:

1. The bottom box has a pre-determined 500px height, because it's initially hidden 500px below the browser. Instead, I need just the box height to fit its content. The content will vary, and will even be changed through javascript once loaded.

2. The bottom box emerges on top of other elements. Instead, I want to split the screen in 2. A bottom half that has as much height as the box content needs. And a top half that behaves just like a regular web page, i.e. if there is too much content the user can just scroll down. To exemplify the described effect you can check this jsfiddle (the code has no relevance though)

How could achieve the described behaviour?

Answer 1

After experimenting with several methods, I ended up with a solution that combines some ideas given in freedomm-n's comments (modify the size of the main div) and in Nikhil's answer (use a flex container). You can see the result in this jsfiddle.

For the following markup:

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

And these styles:

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;
}

This Javascript code is used to animate the div elements:

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');
        });
};

The function called at the end of the animation sets the flexbox parameters, to ensure that the footer sticks to the bottom of the page.