div與js或jquery調整大小

我想基於當前窗口/ iframe大小調整div的大小。div與js或jquery調整大小

例如

如果尺寸是1200 我想調整大小/調整在div

的大小如果窗口較小然後800 我希望禁用如果條的右側部分winnow/iframe太小。

我該如何使用js或javascript 它可以具有1到4個iframe列，並且可以具有許多不同的屏幕分辨率。

感謝

我嘗試下面的下面的媒體查詢的代碼，但是當你有2 IFRAME 500 X500每個或者我可以有一個iframe和窗口大小coudl基於顯示器/分辨率等進行調整。我注意到如果我解決了一些事情.. somethingelse的變化。

@media screen and (min-width: 1200px) and (max-width: 1510px) { 
     #topbar { 
    background-color: #E5EBF1; 
     border: 0 solid red; 
     font-size: 11px; 
     height: 31px; 
     padding: 0 0 0 2px; 
     position: relative; 
     width: 100%; 
     z-index: 1111; 
    } 
    .objects-b { 
     /* 
     float: right; 
     width: 64%; 
     border: 0px solid green; 
     margin: 0; 
     padding: 7px 0 */ 
     display:none; 
    } 

    #topbar .hierarchialgroups-b { 
     float: left; 
     width: 240px; 
     bordeR: 3px solid red; 
    } 
    .rest-b { 
     /* 
     padding: 0; 
     margin: 0; 
     border: 0px solid blue; 
     width: 616px; 
     align: right */ 
     display:none; 
    } 
    } 
    @media screen and (min-width: 440px) and (max-width: 880px) { 
     #topbar { 
    background-color: #E5EBF1; 
     border: 0 solid red; 
     font-size: 11px; 
     height: 31px; 
     padding: 0 0 0 2px; 
     position: relative; 
     width: 60%; 
     z-index: 1111; 
    } 
    .objects-b { 

     display:none; 
    } 

    #topbar .selectgroups-b { 
     float: left; 
     width: 39%; 
     bordeR: 1px solid yellow; 
    } 
    .rest-b { 

     display:none; 
    } 
    } 

HTML BIT 

    <div id="tbar" > 

    <div class="hierarchialgroups-b"><strong>Showing:</strong><select 
     id="groupselect"> 
     <option value="0" selected>...loading groups</option> 
    </select></div> 

    <div class="objects-b"> 
    <ul class="rest-b"> 
     <li><strong>Size Represents</strong>: #&nbsp;Objects</li> 
     <li><strong>Color Represents</strong>: Group Impacts</li> 
     <li><span class="color1">&nbsp;</span>Normal</li> 
     <li><span class="color2">&nbsp;</span>Degraded</li> 
     <li><span class="color3">&nbsp;</span>Critical</li> 
    </ul> 

    </div>

來源

2011-11-17 user244394

窗口大小的步驟或它必須是標量嗎？（如果這是一個跨步的解決方案效率可以通過切換CSS規則上升） – fncomp

使用.resize()功能

$(window).resize(function() { 
    var height=$(window).height(); 
    var width=$(window).width(); 
    $('#div').css({"width":width,"height":height}); 
});

這裏是code

來源

2011-11-17 04:08:52 Wazzzy

@ user244394最新錯誤的兄弟工程...你有沒有嘗試過...幫你評論 – Wazzzy

使用jQuery參考使用$股利（ '＃ID'），其中id是div的id，你應該能夠檢查使用window.innerWidth/window.innerHeight窗口尺寸。基於寬度/高度，你應該能夠通過添加CSS修改DIV屬性改變div的尺寸

來源

2011-11-17 04:06:12

window.onresize = function() { // this will fire every time the browser is resized.. 
    var bWidth = window.innerWidth; // get the viewport width. 
    var el = document.getElementById("#div"); // get the div you want to work with 
    if(bWidth <= 800) { 
     // viewport is less than or equal to 800 
    } else if(bWidth >= 1200) { 
     // viewport is greater than or equal to 1200 
    } 
}

然後確保它是第一次發射...

window.onload = function() { 
    this.onresize(); 
};

來源

2011-11-17 04:36:46 rlemon

div與js或jquery調整大小

回答

相關問題