根據屏幕尺寸調整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;