Question

我是JQuery的新手。我正在尝试创建一个网页，可以根据查看的屏幕大小进行响应。通常我用CSS做，但这次我认为必须尝试JQuery.All div将有图像所以需要给他们高度，否则他们不会显示。

问题是当页面加载时，左侧主图像div跳转到屏幕大小的一半，然后调整大小到JQuery生成的高度。例如：div的默认高度约为396像素，根据屏幕显示为798像素，因此它首先调整为396然后调整为798，它显示并且看起来非常糟糕。

布局是这样的，没有标题，但有一个固定的页脚和汉堡图标在页脚最小高度50px。我正在使用Bootstrap。

我使用col-md-9和col-md-3时没有使用任何css作为主要div。我还附上了下面的布局

代码在

之下

-- no header-- 
<div class="row">
  <div class="row" id="main-services">
       <div class="col-md-9" id="left-services"></div>
       <div class="col-md-3" id="right-services">
      <div class="row btn-menu top-right-services" id="top-right-services"></div>
          <div class="row bottom-right-services" id="bottom-right-services"></div>
       </div> 
  </div><!--class="row" id="main-services"-->
</div>

--fixed footer with min height 50px, the main menu is here--

JQUERY
script(document).ready(function($) {  

jQuery(window).on('load resize', function(){
                //get windows height
            var winWidth = jQuery(window).width();    
            var winHeight = jQuery(window).height();
            var imgHeight= winHeight-50;
            var onequater=(winHeight*1)/4 ;
            var threequater=((winHeight*3)/4)-50 ;

            jQuery('#left-services').css('height',imgHeight+'px');
            jQuery('#right-services').css('height',imgHeight+'px');
            jQuery('#top-right-services').css('height',onequater+'px');
            jQuery('.right-project-menu').css('height',onequater+'px');
            jQuery('#bottom-right-services').css('height',threequater+'px');
        });
    });

我也在这里尝试了代码resize div - jquery

layout image

请帮帮我

根据屏幕大小调整3个div的图像大小

0 个答案: