停止 div 容器调整大小答案

【问题标题】：Stop div container from resizing停止 div 容器调整大小
【发布时间】：2012-12-09 14:16:21
【问题描述】：

我在一个 html 页面中有两列，一列向右浮动，另一列向左浮动。我已将两个容器的高度设置为 100%，将两个容器的宽度设置为 50%。我希望这两个容器适合主窗口。当用户水平调整窗口大小时，我不希望内容调整大小。我怎样才能做到这一点？

谢谢

【问题讨论】：

当您使用百分比宽度时，内容将调整大小以填满屏幕。如果您不希望发生调整大小，请不要使用百分比宽度。相反，请考虑在页面最初加载时使用 Javascript 来计算屏幕大小，并在页面大小调整后将这些值保留在 CSS 中。
您希望您的内容在浏览器变大时居中并在浏览器变小时滚动？
你的问题是矛盾的。您希望内容适合整个窗口，但不希望它在窗口调整大小时调整大小？

【解决方案1】：

有很多方法可以实现这一目标。首先，最简单的方法是将 css 值设置为 min-width！因此，如果您希望它调整大小但停止在 960 像素（例如），您只需要这样做：

    myCoolDiv{
         width: 100%;
         height: 50%;
         min-width: 960px;
   }

这会给你最好的结果。否则，如果您根本不希望内容调整大小，并且选择器的宽度等于初始屏幕的 100%，我会这样使用 jQuery：

    $(document).ready(function() {
       //Call a variable to know the width of the window
       var screenWidth = $(window).width();
       $('myCoolDiv').css('width', screenWidth + 'px');
    });

希望对您有所帮助！如果我的回答不够清楚，或者你不明白其中的一部分，请告诉我！

干杯！

【讨论】：

你说，有很多方法，你能告诉我们，还有什么其他方法可以实现这个
@rajeevpani .. min-width 或 min-height 确实是这里的方法，可以根据问题使用其他方法，但我会说如果你想要容器调整大小但有调整大小的限制，您希望隐含 min-width 或 max-width。我不确定我当时的想法，但我可能正在考虑 CSS 媒体查询等，但现在我再次阅读了这个问题，我会说答案是最好的方法。
不需要JS，用width: 100vw/height: 100vh（分别为viewport-width和viewport-height单位）。