Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
3年前关闭。
我正在一个响应网站上。
我在一个页面上有很多数据,并且在页面底部有一个固定的div,该div中的数据有时是动态的,它有2行,有时3行可能会有所不同。
为了防止页面底部的数据被隐藏在固定div下,我想在页面末尾留一些空白吗?
这是代码。
也建议我在屏幕底部固定数据的好方法,并且页面上的数据可以安全地隐藏在div下。
然后用js你可以控制它的高度
您也可以在窗口调整大小事件中重新计算它
这是jsFiddle
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
3年前关闭。
我正在一个响应网站上。
我在一个页面上有很多数据,并且在页面底部有一个固定的div,该div中的数据有时是动态的,它有2行,有时3行可能会有所不同。
为了防止页面底部的数据被隐藏在固定div下,我想在页面末尾留一些空白吗?
这是代码。
<style>
.screen-bottom-fixed {
position: fixed;
bottom: 0;
right: 0;
left: 0;
background-color:aqua;
padding-top: 8px;
}
.section-1 {
text-align: center;
background-color: red;
}
.section-2 {
text-align: center;
background-color:chartreuse;
}
</style>
<div class="page">
<div class="1">
about 200 lines of text here.....
</div>
<div class="screen-bottom-fixed">
<div class="section-1">
We have some lines of dynamic date here 11111.....
</div>
<div class="section-2">
We have some more dynamic date here 22222.......
</div>
</div>
</div>
也建议我在屏幕底部固定数据的好方法,并且页面上的数据可以安全地隐藏在div下。
最佳答案
我知道您没有在问题标签中添加js,但是在这种情况下,js首先出现在我的脑海中。
首先在屏幕底部固定的块之前添加空块
<div class="separator"><!-- empty block --></div>
然后用js你可以控制它的高度
$('.separator').height($('.screen-bottom-fixed').height());
您也可以在窗口调整大小事件中重新计算它
$(window).on('resize', function(){
$('.separator').height($('.screen-bottom-fixed').height());
});
这是jsFiddle