根据屏幕大小调整div大小

Question

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

我想让一个横幅div填充屏幕上除了最后50 is或100 is之外的所有内容，这样用户就可以看到有更多的内容可以滚动到上面(这是用图形和箭头完成的)。

这也需要发生，无论屏幕大小的桌面移动。下面的代码调整了我的包含div的大小以填充屏幕，并在测试中为所有设备工作，我只需要最后一部分，然后删除屏幕上显示的以下内容中的xx像素到bing。

我有这两个片段，它们能很好地填充屏幕。

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

为什么不在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 2

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