javascript - 根据屏幕大小调整div的大小

Question

我更像是一名前端开发人员，所以我只是一个复制粘贴 jQuery/Javascript 的人。我可以在阅读后修改位，但任何帮助或修改代码都会很棒。

我想要一个横幅 div 填充除屏幕最后 50 像素或 100 像素以外的所有区域，以便用户可以看到有更多内容可以滚动到(这是通过图形方式和箭头完成的)。

无论从桌面到移动设备的屏幕尺寸如何，这都需要发生。我有以下代码调整我包含的 div 的大小以填充屏幕并适用于测试的所有设备我只需要最后一部分然后删除 xx 像素以在屏幕上看到下面的内容。

我有这 2 个片段非常适合全屏显示

片段 1

<script type="text/javascript">
function handleResize() {
var h = jQuery(window).height();
    jQuery('.banner_slide').css({'height':h+'px'});
}
jQuery(function(){
    handleResize();
    jQuery(window).resize(function(){
    handleResize();
});
});
</script>

片段 2

<script type="text/javascript">
jQuery(function(){
    var windowH = jQuery(window).height();
    var wrapperH = jQuery('.banner_slide').height();
    if(windowH > wrapperH) {                            
        jQuery('.banner_slide').css({'height':(jQuery(window).height())+'px'});
    }                                                                               
jQuery(window).resize(function(){
    var windowH = jQuery(window).height();
    var wrapperH = jQuery('.banner_slide').height();
    var differenceH = windowH - wrapperH;
    var newH = wrapperH + differenceH;
    var truecontentH = jQuery('.banner_slide div').height();
    if(windowH > truecontentH) {
        jQuery('.banner_slide').css('height', (newH)+'px');
    }
    })          
});
</script>

任何帮助都会很棒

Answer 1

如果古老的浏览器支持不是问题，您可以使用 css3 calc() 函数。

为父级设置 padding-right:50px，应用 width: calc(100% - 50px) 并将图像绝对定位在填充空间