向上滑动一个水平分割网页的"fixed height div"？

Question

我需要一个从页面底部向上滑动的框。我将使用该框向新用户显示重要信息。因此，例如，在注册后，该框会立即向上滑动并显示欢迎消息。

我已经 this jsfiddle 在某种程度上体现了所需的行为。它只是一个从底部向上滑动的 div:

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

但是代码只是为了举例说明，因为实现不充分，原因如下：

底部框具有预先确定的 500px 高度，因为它最初隐藏在浏览器下方 500px。相反，我只需要盒子的高度来适应它的内容。内容会有所不同，甚至会在加载后通过 javascript 进行更改。
底部框出现在其他元素之上。相反，我想将屏幕一分为二。下半部分的高度与框内容所需的一样多。上半部分的行为就像一个普通的网页，即如果内容太多，用户可以向下滚动。为了举例说明所描述的效果，您可以检查 this jsfiddle (the code has no relevance though)

如何实现所描述的行为？

Answer 1

我更新了your Fiddle。详情请往下看。

您不需要为 .foot 部分使用 position: fixed，您可以使用 position: relative。由于我注意到您使用的是 flex，因此我冒昧地使用相同的方式修复此问题。

所做的更改

首先，我建议添加一个 div 容器，给一个 class 名称说 - container。
制作容器 display: flex 并将默认方向更改为 flex-direction: column。
现在，由于您希望 main-content 可以根据其内容进行滚动，因此您需要先 设置该部分的高度 和 height: 200px; 然后使用 overflow-y: auto;

使其可滚动

如果您有任何疑问，请告诉我。

Answer 2

在尝试了几种方法之后，我最终得到了一个解决方案，它结合了 freedomm-n 的评论（修改 main div 的大小）和 Nikhil 的回答（使用 flex 容器）中给出的一些想法.您可以在 jsfiddle.

中看到结果

对于以下标记：

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

还有这些款式：

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

此 Javascript 代码用于为 div 元素设置动画：

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

在动画结束时调用的函数设置 flexbox 参数，以确保页脚紧贴页面底部。

向上滑动一个水平分割网页的"fixed height div"？

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

javascript

jquery

html

css

infobox