自动调整 Web 应用程序的高度和宽度答案

【问题标题】：Auto Resizing the height and the width of a web application自动调整 Web 应用程序的高度和宽度
【发布时间】：2011-12-26 03:43:39
【问题描述】：

我正在开发一个网络应用程序，我想自动调整填充了背景图像的三列 div 的大小，以便在我使用 ctrl- 和 + 放大或缩小时使它们填满整个页面，就像 jsfiddle.net 一样，这是我为实现这种效果而写的，但它失败了：

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

我想知道是否有人可以帮助我解决这个问题

【问题讨论】：

标签： css aspect-ratio jsfiddle

【解决方案1】：

我认为这是解决您问题的方法：

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);     
    }
});

【讨论】：

这真的是一个很好的答案，它非常有效，非常感谢，但我有一个小问题，如果我想在背景中放置一个图像 url 而不是 bg 颜色怎么办？我试过了，但它没有填满 div 的整个高度，你知道吗？
我在修复背景的解决方案中工作，但它不是很稳定[在不同的浏览器中检测背景大小也有差异（如果你没有指定'背景大小也会有问题' 财产）]。如果页面在加载时被缩放，上面的脚本也将不起作用，因此它仅在您以 100% 缩放打开网页时才起作用。可能更好的方法是检测缩放级别......但看看有什么乱七八糟的：stackoverflow.com/questions/1713771/…
这只是帮助获得缩放级别，但实际上我试图查看代码以便能够设置缩放级别但我认为这是不可能的，你知道如何做这个？我还发现了这个插件，我认为它会有所帮助，但不能最大限度地放大：methvin.com/splitter/3csplitter.html
您不能设置缩放级别。您可以检查它并设置特定元素的特定大小，其大小取决于此缩放级别。
当我需要使列从顶部开始以 100px 的边距开始时，您的脚本中发生了一件奇怪的事情，例如，脚本无效：s

【解决方案2】：

对于可变宽度使用 %age。和固定使用的像素。你还有什么不明白的。如果您还需要调整背景图片的大小，则必须为此编写 js。

【讨论】：