向上滑動“固定高度div”以水平拆分網頁？

Question

我需要一個從頁面底部向上滑動的框。 我將使用該框向新用戶顯示重要信息。 因此，例如，在注冊后，該框將隨歡迎消息一起向上滑動。

我做了這個jsfiddle ，在某種程度上體現了期望的行為。 只是一個div從底部向上滑動：

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

但是，該代碼僅是示例性的，因為實現不足的原因如下：

1. 底部的框具有預定的500px高度，因為它最初隱藏在瀏覽器下方500px 。 相反，我只需要盒子的高度適合其內容即可。 內容會有所不同，甚至在加載后甚至會通過JavaScript進行更改。

2. 底部的框出現在其他元素的頂部。 相反，我想將屏幕拆分為2。下半部分的高度與框內容所需的高度相同。 上半部分的行為就像常規網頁一樣，即，如果內容過多，用戶可以向下滾動。 為了舉例說明所描述的效果，您可以檢查一下jsfiddle（盡管代碼沒有相關性）

如何實現所描述的行為？

Answer 1

我已經更新了你的小提琴 。 請在下面查看詳細信息。

您無需在.foot部分中使用position: fixed ，而可以使用position: relative 。 由於我注意到您使用的是flex，因此我可以自由地使用flex對其進行修復。

所做的更改

• 首先，我建議添加一個div容器，並給它一個類名say- container 。
• 使容器display: flex並將默認方向更改為flex-direction: column 。
• 現在，由於您希望main-content根據其內容是可滾動的，因此需要首先為該部分設置一個 height: 200px; 然后使用overflow-y: auto; 使其可滾動 overflow-y: auto;

如果您有任何疑問，請告訴我。

Answer 2

在嘗試了幾種方法之后，我最終得到了一個解決方案，該解決方案結合了freem -n的注釋（修改主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參數，以確保頁腳停留在頁面底部。