调整浏览器窗口大小时，避免调整块级元素的大小

Question

以下示例使用<div> s显示左侧和右侧栏以及内容栏。

#content {
    margin-left: 120px;
    margin-right: 120px;
    overflow: hidden;
}

#left {
    float: left;
    width:  120px;
}

#right {
    float: right;
    width:  120px;
}

HTML

<div id="container" style="border: 3px solid black;">
    <div id="left" style="border: 2px solid #008000;">Left</div>
    <div id="right" style="border: 2px solid #008000;">Right</div>

    <div id="content">
        <table style="width: 100%; height: 500px; border: 2px solid #F00;" rules="all">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>

            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </table>
    </div>
</div>

调整浏览器窗口大小时，内容<div>中的表也会调整大小，不应该发生。无论如何，调整浏览器窗口的大小不应该影响它显示的内容。

如何避免调整内容栏的大小，以便浏览器窗口上只显示滚动条，调整大小时（内容应保持与页面加载时显示的内容相同）？

_{我尝试将display: inline-block提供给content，但这种方式无效。}

Answer 1

默认情况下，块元素的宽度为视口的100％。

如果您不希望他们更改尺寸，请根据自己的喜好指定width: min-width:或max-width:。

Answer 2

我之前没有见过这样的请求。

1. 页面加载的容器是容器，如果调整窗口大小，则滚动视图端口。

样本：http://jsbin.com/jemeyo/1/

修改：http://jsbin.com/jemeyo/1/edit

---

这需要获取宽度然后添加脚本，在这种情况下，我使用jQuery。

https://github.com/dreamerslab/jquery.actual开始

jQuery的：

/*! Copyright 2012, Ben Lin (http://dreamerslab.com/)
 * Licensed under the MIT License (LICENSE.txt).
 * https://github.com/dreamerslab/jquery.actual
 * Version: 1.0.16
 *
 * Requires: jQuery >= 1.2.3
 */
(function(a){a.fn.addBack=a.fn.addBack||a.fn.andSelf;
a.fn.extend({actual:function(b,l){if(!this[b]){throw'$.actual => The jQuery method "'+b+'" you called does not exist';}var f={absolute:false,clone:false,includeMargin:false};
var i=a.extend(f,l);var e=this.eq(0);var h,j;if(i.clone===true){h=function(){var m="position: absolute !important; top: -1000 !important; ";e=e.clone().attr("style",m).appendTo("body");
};j=function(){e.remove();};}else{var g=[];var d="";var c;h=function(){c=e.parents().addBack().filter(":hidden");d+="visibility: hidden !important; display: block !important; ";
if(i.absolute===true){d+="position: absolute !important; ";}c.each(function(){var m=a(this);var n=m.attr("style");g.push(n);m.attr("style",n?n+";"+d:d);
});};j=function(){c.each(function(m){var o=a(this);var n=g[m];if(n===undefined){o.removeAttr("style");}else{o.attr("style",n);}});};}h();var k=/(outer)/.test(b)?e[b](i.includeMargin):e[b]();
j();return k;}});})(jQuery);


 $(window).on('load', function() {

    var containerwidth = $('#container').actual('width');

    $('#container').css('width', (containerwidth) + 'px');


 });

添加了CSS，因此它不会非常非常宽（我的偏好）并且它居中：

#container {max-width:1200px;margin:0 auto;}

HTML（SEE OP）

注意：即使视口非常小，它也会修复它，我建议将其包装在一个调整大小中并加载一个你选择的窗口宽度，以便它在一定大小以上。视口方向更改可能会非常奇怪，因为它没有加载，因此无法自动调整。非常奇怪的要求，但无论如何，这里是。