向上滑动一个水平分割网页的"fixed height div"?
Slide up a "fixed height div" that splits a web page horizontally?
我需要一个从页面底部向上滑动的框。我将使用该框向新用户显示重要信息。因此,例如,在注册后,该框会立即向上滑动并显示欢迎消息。
我已经 this jsfiddle 在某种程度上体现了所需的行为。它只是一个从底部向上滑动的 div:
$('.foot').addClass('slide-up', 500, 'easeOutBounce');
但是代码只是为了举例说明,因为实现不充分,原因如下:
底部框具有预先确定的 500px
高度,因为它最初隐藏在浏览器下方 500px
。相反,我只需要盒子的高度来适应它的内容。内容会有所不同,甚至会在加载后通过 javascript 进行更改。
底部框出现在其他元素之上。相反,我想将屏幕一分为二。下半部分的高度与框内容所需的一样多。上半部分的行为就像一个普通的网页,即如果内容太多,用户可以向下滚动。为了举例说明所描述的效果,您可以检查 this jsfiddle (the code has no relevance though)
如何实现所描述的行为?
我更新了your Fiddle。详情请往下看。
您不需要为 .foot
部分使用 position: fixed
,您可以使用 position: relative
。由于我注意到您使用的是 flex,因此我冒昧地使用相同的方式修复此问题。
所做的更改
- 首先,我建议添加一个 div 容器,给一个 class 名称说 -
container
。
- 制作容器
display: flex
并将默认方向更改为 flex-direction: column
。
- 现在,由于您希望
main-content
可以根据其内容进行滚动,因此您需要先 设置该部分的高度 和 height: 200px;
然后使用 overflow-y: auto;
使其可滚动
如果您有任何疑问,请告诉我。
在尝试了几种方法之后,我最终得到了一个解决方案,它结合了 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 参数,以确保页脚紧贴页面底部。
我需要一个从页面底部向上滑动的框。我将使用该框向新用户显示重要信息。因此,例如,在注册后,该框会立即向上滑动并显示欢迎消息。
我已经 this jsfiddle 在某种程度上体现了所需的行为。它只是一个从底部向上滑动的 div:
$('.foot').addClass('slide-up', 500, 'easeOutBounce');
但是代码只是为了举例说明,因为实现不充分,原因如下:
底部框具有预先确定的
500px
高度,因为它最初隐藏在浏览器下方500px
。相反,我只需要盒子的高度来适应它的内容。内容会有所不同,甚至会在加载后通过 javascript 进行更改。底部框出现在其他元素之上。相反,我想将屏幕一分为二。下半部分的高度与框内容所需的一样多。上半部分的行为就像一个普通的网页,即如果内容太多,用户可以向下滚动。为了举例说明所描述的效果,您可以检查 this jsfiddle (the code has no relevance though)
如何实现所描述的行为?
我更新了your Fiddle。详情请往下看。
您不需要为 .foot
部分使用 position: fixed
,您可以使用 position: relative
。由于我注意到您使用的是 flex,因此我冒昧地使用相同的方式修复此问题。
所做的更改
- 首先,我建议添加一个 div 容器,给一个 class 名称说 -
container
。 - 制作容器
display: flex
并将默认方向更改为flex-direction: column
。 - 现在,由于您希望
main-content
可以根据其内容进行滚动,因此您需要先 设置该部分的高度 和height: 200px;
然后使用overflow-y: auto;
使其可滚动
如果您有任何疑问,请告诉我。
在尝试了几种方法之后,我最终得到了一个解决方案,它结合了 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 参数,以确保页脚紧贴页面底部。