自動調整Web應用程序的高度和寬度

我正在開發一個Web應用程序，並且我想自動調整填充了背景圖像的三列div，以使它們在我放大或縮小時填充整個頁面用CTRL-和+酷似jsfiddle.net，這裏是我已經寫了，使這個效果，但它失敗：自動調整Web應用程序的高度和寬度

HTML：

<div id="three_columns_container"> 
    <div id="first-column">...</div> 
    <div id="second-column">...</div> 
    <div id="third-column">...</div> 
</div>

CSS：

#first-column{ 
    background:('slice.png'); 
    width: 15%; 
    height: 97%; 
} 
#second-column{ 
    background:('slice.png'); 
    width: 15%; 
    height: 97%; 
} 
#third-column{ 
    background:('slice.png'); 
    width: 70%; 
    height: 97%; 
}

個JS：

$(window).resize(function(){ 
     $("#three_columns_container").height() = $(window).height * 0.97; 
     $("#three_columns_container").width() = $(window).width* 0.97; 
    });

這個鏈接可以幫助解決這一問題，但它沒有確切的療效 link

我想知道如果有人能幫助我解決這個

來源

2011-12-25 Bassam Tarek

我認爲這是你的問題的解決方案：

CSS

#firstColumn { 
    width: 15%; 
    height: 150px; 
    background: #1e3340; 
    float: left; 
} 
#secondColumn { 
    width: 70%; 
    height: 150px; 
    background: #305a5e; 
    float: left;  
} 
#thirdColumn { 
    width: 15%; 
    height: 150px; 
    background: #323e45; 
    float: left;  
}

HTML

<div id="three_columns_container"> 
    <div id="firstColumn">...</div> 
    <div id="secondColumn">...</div> 
    <div id="thirdColumn">...</div> 
</div>

$(document).ready(function() { 
    var divRatio = {}; 
    setRatio('firstColumn'); 
    setRatio('secondColumn'); 
    setRatio('thirdColumn'); 
    $(window).resize(function() { 
     fixHeight('firstColumn'); 
     fixHeight('secondColumn'); 
     fixHeight('thirdColumn'); 
    }); 
    function setRatio(container) { 
     var selector = '#' + container; 
     divRatio[container] = $(selector).height()/$(selector).width(); 
    } 
    function fixHeight(container) { 
     var selector = '#' + container, 
      ratio = divRatio[container], 
      height = ratio * $(selector).width(); 
     $(selector).height(height);  
    } 
});

來源

2011-12-25 19:43:39

這真的是一個很好的答案它工作效率非常高，非常感謝，但我有一個小問題，如果我想要在背景中放置圖像url而不是bg顏色？我嘗試過，但它並沒有填補整個div的高度，你知道嗎？ – 2011-12-26 15:09:06

我曾在解決方案中修復背景，但它不是很穩定[在不同的瀏覽器中檢測背景大小也存在差異（如果您沒有指定'背景大小'屬性，也存在問題]]。如果頁面在加載時縮放，上面的腳本也不起作用，因此當您打開100％縮放的網頁時它正常工作。可能更好的方法是檢測縮放級別......但只是看看有什麼混亂的是：http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern瀏覽器 – 2011-12-26 22:59:39

這只是幫助獲得縮放級別，但實際上我試圖在代碼中查看，以便能夠設置縮放級別，但我認爲這是不可能的，你有任何想法如何做到這一點？我也發現這個插件，我認爲它會幫助很多，但不是與最大放大：http://methvin.com/splitter/3csplitter.html – 2011-12-27 11:51:54

可變寬度使用％年齡。和固定使用像素。你還有什麼不明白的。如果你需要改變背景圖片，你將不得不爲此編寫js。

來源

2011-12-25 19:38:47

自動調整Web應用程序的高度和寬度

回答

相關問題