2015-06-17 40 views
1

我正在創建一個16:9比例響應div,但是當我調整窗口的大小時,container3仍然保持原始大小,我的代碼中有任何問題?任何人都可以幫助我?由於創建響應div 16:9

$(document).ready(function(){ 
 
\t rp_config(); 
 

 
}); 
 
$(window).resize(function(){ 
 
\t rp_config(); 
 

 
}); 
 
function rp_config(){ 
 
\t var windowwidth = $(window).width(); 
 
\t var windowheight = $(window).height(); 
 
\t var bar = 64; 
 
\t var bottom = 45; 
 
\t var chat = 250; 
 
\t var container2_width = windowwidth - chat; 
 
\t var available_height = windowheight - bar - bottom; 
 
\t 
 
\t $(".container").width(windowwidth); 
 
\t $(".container2").width(container2_width); 
 
\t $(".container3").width(available_height/9 * 16); 
 
\t 
 
\t $(".container").height(available_height); 
 
\t $(".container2").height(available_height); 
 
\t $(".container3").height(available_height); 
 
\t 
 
\t 
 

 
} 
 
rp_config();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" style="background-color:#000;"> 
 
\t <div class="container2" style="background-color:#333;"> 
 
    \t <div class="container3" style="background-color:#ccc;"> 
 
     
 
     </div> 
 
    </div> 
 
</div>

+0

我跑了你的片段,但看起來容器3相對地改變它的大小,你能進一步解釋它沒有改變,或者你做了什麼,你期望它是什麼,以及意外出現。 – fuyushimoya

+0

爲什麼你使用JavaScript進行簡單的佈局任務? –

+0

@fuyushimoya調整窗口寬度,容器3將變得更小,縱橫比16:9 –

回答

1

你需要決定container3的寬度是否比container2的大。

$(document).ready(function(){ 
 
\t rp_config(); 
 

 
}); 
 
$(window).resize(function(){ 
 
\t rp_config(); 
 

 
}); 
 

 
function rp_config(){ 
 
    var windowwidth = $(window).width(); 
 
    var windowheight = $(window).height(); 
 
    var bar = 64; 
 
    var bottom = 45; 
 
    var chat = 250; 
 
    var container2_width = windowwidth - chat; 
 
    var available_height = windowheight - bar - bottom; 
 
    
 

 
    var altWidth = available_height/9 * 16 
 
     ,altHeight = available_height; 
 
    if (altWidth > container2_width) { 
 
    altWidth = container2_width; 
 
    altHeight = altWidth/16 * 9; 
 
    } 
 
    
 
    $(".container").width(windowwidth); 
 
    $(".container2").width(container2_width); 
 
    $(".container3").width(altWidth); 
 
    
 
    $(".container").height(available_height); 
 
    $(".container2").height(available_height); 
 
    $(".container3").height(altHeight); 
 
} 
 
rp_config();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='case1' class="container" style="background-color:#000;"> 
 
\t <div class="container2" style="background-color:#333;"> 
 
    \t <div class="container3" style="background-color:#ccc;"> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

這裏我用altHeight保持container3保持一個16:9的比例,你可以,如果你希望它填補了整個container2的區域中刪除它。

+0

非常感謝你~~這讓我迷惑了2個小時,現在只剩下使用css左邊設置'container3'到中間,我可以讓我自己...再次感謝你〜 –

+0

很高興讓你開心:D – fuyushimoya