根据屏幕尺寸调整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)并将图像绝对定位在padding空间

Answer 2

为什么不在CSS中使用媒体查询呢？

然后，您可以根据设置方式来调整所有屏幕尺寸，高度和宽度。

例如：

    @media (min-height: 500px) and (max-height: 796px){

     .banner_slide{
    height: 746px;
           }

    }

然后，您可以将样式调整为所需的任何屏幕尺寸，因此，如果移动设备的尺寸取决于移动设备的尺寸，则尺寸可能会更小。 （调整为适合任何衣服！）

 @media (min-height: 0px) and (max-height: 350px){

     .banner_slide{
    height: 300px;
           }

    }

Answer 3

在代码段2中，通过从窗口高度中减去横幅高度来计算最终的高度

var windowH = jQuery(window).height();
var wrapperH = jQuery('.banner_slide').height();
var differenceH = windowH - wrapperH;

您可以像这样减去您的底部偏移的高度吗？

var windowH = jQuery(window).height();
var wrapperH = jQuery('.banner_slide').height();
var bottomOffset = jQuery('.image_on_bottom_page').height;
var differenceH = windowH - wrapperH - bottomOffset;