CSS 定位，希望在调整窗口大小时固定内容的宽度。答案

【问题标题】：CSS Positioning, want to make content's width fixed when window is resized.CSS 定位，希望在调整窗口大小时固定内容的宽度。
【发布时间】：2017-09-22 05:10:03
【问题描述】：

我有一个 div，里面有两个嵌套的 div，(float:left) 一个是菜单栏，右边 (float:right) 应该显示页面的任何内容，当窗口位于时它可以正常工作最大，但是当我调整它的大小时，内容被折叠，直到它不再有任何空间，它被强制显示在左侧菜单栏下方，如何使宽度固定，以便用户在调整大小时可以滚动？（css宽度不起作用，我在浮动正确的内容和不浮动之间交替），这里是代码：

<div style="width:100%">
  <div style="float:left; background:#f5f5f5; border-right:1px solid black; height:170%; width:120px;"></div>   
  <div style="margin-right:2px;margin-top:15px; margin-bottom:5px; width:100%; border:1px solid #f5f5f5"></div> 
</div>

我现在只需要在内部资源管理器上运行它。

【问题讨论】：

标签： css

【解决方案1】：

应该这样做（容器是包含 2 个 div 的父 div）：

.container {
    width: 1024px;
    display: block;
}

【讨论】：

【解决方案2】：

您可能希望在包含的 div 上设置宽度并设置溢出属性

#containing_div {
    width: 200px;
    overflow: auto;
}

如果有意义的话，也可以在页面上使用 min-width 属性，但是 CSS 属性并不真正适用于 IE6，这通常是我在那种情况下所做的（支持 Firefox、IE7、IE6 等）

#container {
    min-width: 1000px;
    _width: 1000px; /* This property is only read by IE6, which gives a fixed width */
}

【讨论】：

正如@boris-callens 所说，注意 min-width 属性，因为它没有得到广泛支持（IE6 肯定不使用它，因此我建议使用 _width 来解决 IE6）。

【解决方案3】：

好吧，设置width 或min-width 属性是可行的方法。

现在，没有示例或实际页面的链接，回答起来有点棘手。

【讨论】：

【解决方案4】：

只是不要让正确的 div 浮动。菜单已经漂浮在任何其他内容的左侧。只需为右侧 div 设置一个左边距，这样该 div 中的内容就不会被浮动 div 包围。

【讨论】：

【解决方案5】：

如果两个 div 占用了 100% 的可用宽度，可以尝试使用百分比宽度并显示：在需要的地方与另一个具有固定最小宽度/宽度 (boo IE) 的 div 内联。

这个是如果没有一些HTML可以继续下去是相当困难的

【讨论】：

【解决方案6】：

您的包含 div 的宽度应该足以容纳两个内部 div

因此，如果您的两个内部 div 各为 300 像素，并且假设您没有边距/填充，那么您应该将外部 div 设置为 600 像素；

【讨论】：

【解决方案7】：

我有点困惑：
固定宽度意味着节点的宽度不会改变。绝不。你说当屏幕太小而不适合你的内容时你想滚动，所以我认为你的意思是固定宽度的确切相反。

如果我的假设是正确的，您可以如前所述选择百分比宽度。注意宽度建议的“最小宽度”解决方案，因为它没有得到很好的支持。

<div id="container" style="width:100%">
    <div id="primaryNav" style="float:left; width:150px; background-color: Orange">someNav</div>
    <div id="content" style="margin-left: 10px; background-color: Red; overflow: auto;">
        loadsOfSuperInterestingContentI'mSuperSerious<br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        Seriously
    </div>
</div>

这应该是很好的跨浏览器

【讨论】：