Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗?更新问题,使其仅通过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

07-24 09:47
查看更多