調整瀏覽器窗口大小時自動更改框的寬度？

我有2個盒子。調整窗口大小時，＃content-left和＃content-right會自動調整高度。我想要的是自動調整＃內容的大小 - 正確的寬度也填補了這兩個框之間的差距。調整瀏覽器窗口大小時自動更改框的寬度？

到目前爲止我寫的代碼僅適用於首頁加載或刷新。當窗口被調整大小時它不起作用。我究竟做錯了什麼？

的jQuery：

$(document).ready(function(){ 

    $(window).load(function() { 
    scrollPaneLoad(); 
    }); 

    function scrollPaneLoad() { 
     if ($(window).height() > $(document).height()) { 
     main_height = $(document).height(); 
     } else { 
     main_height = $(window).height(); 
     } 
     div_height = main_height - $('#header-outer').height() - $('#footer').height(); 
     if (div_height < 400) div_height = 400; 
     $('#content-right, #content-left').css({height: div_height + 'px'}); 
     img_width = $('img.content-left-img').width(); 
     content_right_width = 945 - img_width; 
     $('#content-left').css({width: img_width + 'px'}); 
     $('#content-right').css({width: content_right_width + 'px'}); 
     $('#content-right').jScrollPane(
     { 
      showArrows: true, 
      horizontalGutter: 10 
     } 
    ); 
    } 

    $(window).resize(function() { 
    scrollPaneLoad();  
    }); 

});

HTML：

... 
<div id="content"> 
    <div id="content-left"> 
    <img src="img/home.jpg" class="content-left-img" /> 
    </div><!--eof #content-left--> 
    <div id="content-right"> 
    <div class="inner"> 
     <!--content goes here--> 
    </div><!--eof .inner--> 
    </div><!--eof #content-right--> 
    <div class="float-fix"></div> 
</div> 
...

CSS：

#content { 
    width:950px; 
    text-align:left; 
    margin:0 auto; 
} 
#content-left { 
    float:left; 
    position:relative; 
    width:565px; 
    min-height:400px; 
    height:100%; 
    overflow:hidden; 

    background-color: transparent; 
    background-position: left top; 
    background-repeat: no-repeat; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -khtml-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

#content-left img.content-left-img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; 
    height: 100%; 
    min-height: 400px; 
    margin: 0; 
    border: 0; 
} 
#content-right { 
    float:right; 
    width:380px; 
} 
#content-right .inner { 
    padding:15px; 
}

來源

2012-07-22 Cris

使用CSS'position：static'優於JavaScript – 2012-07-22 04:06:41

**參考：** ***我寫的代碼目前只適用於第一頁加載或刷新***我注意到當瀏覽器窗口是的高度短，頁面「看起來」正常'onload'。但是，當瀏覽器以最大視口大小訪問測試網站時，它會有一個壓扁的文本面板。如果你不知道的話，就上前去。 – arttronics 2012-07-22 04:07:25

[** jsFiddle ** Live Site]（http://jsfiddle.net/fcQuZ/）。注意：沒有更正，URL現在是絕對的。 – arttronics 2012-07-22 04:29:26

這是因爲您將寬度設置爲常量值，因此即使調整窗口大小也不會改變寬度。將高度和寬度更改爲百分比值，例如60％或70％，並且它們將擴大或縮小窗口。請注意，如果元素收縮，其內容可能會以醜陋的方式溢出。

來源

2012-07-22 04:52:02 SexyBeast

我知道，但爲什麼它在刷新頁面時起作用，但當我調整它的大小時卻不起作用？ – Cris 2012-07-22 06:38:48

調整瀏覽器窗口大小時自動更改框的寬度？

回答

相關問題