调整浏览器窗口大小时自动更改框的宽度？

我有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

调整浏览器窗口大小时自动更改框的宽度？

回答

相关问题