自动调整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应用程序的高度和宽度

回答

相关问题