Javascript 根据屏幕大小调整div的大小

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

我希望有一个横幅div填充屏幕的最后50px或100px之外的所有内容，以便用户可以看到有更多的内容可以滚动（这是通过图形化的和箭头完成的）

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

我有这两个片段，非常适合全屏播放

片段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>

函数handleResize（）{
var h=jQuery（window.height（）；
jQuery（'.banner_slide'）.css（{'height'：h+'px'}）；
}
jQuery（函数（）{
handleResize（）；
jQuery（窗口）.resize（函数（）{
handleResize（）；
});
});

片段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>

jQuery（函数（）{
var windowH=jQuery（window）.height（）；
var wrapperH=jQuery（'.banner_slide'）.height（）；
如果（windowH>wrapperH）{
css（{'height'：（jQuery（window.height（））+'px'}）；
}                                                                               
jQuery（窗口）.resize（函数（）{
var windowH=jQuery（window）.height（）；
var wrapperH=jQuery（'.banner_slide'）.height（）；
var differenceH=windowH-wrapperH；
var newH=包装器h+差异h；
var truecontentH=jQuery（'.banner_slide div'）.height（）；
如果（windowH>truecontentH）{
jQuery（'.banner_slide'）.css（'height'，（newH）+'px'）；
}
})          
});

---

任何帮助都将是惊人的

如果古老的浏览器支持不是问题，您可以使用css3

calc（）

函数

---

为父对象设置

padding right:50px

，应用

width:calc（100%-50px）

并将图像绝对定位在填充空间中

为什么不在css中使用媒体查询

然后，您可以根据设置方式调整所有屏幕大小、高度和宽度

例如：

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

     .banner_slide{
    height: 746px;
           }

    }

然后你可以根据你想要的屏幕大小来调整样式，所以如果是手机大小取决于手机，它可能会更小。（适应任何适合的衣服！）

---

在代码段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;

---

您是否尝试设置高度：100%？

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