html - 页面宽度变窄时 Div 不产生滚动条

Question

这里是 jfiddle 的链接: https://jsfiddle.net/obanc/vqabukvj/

<div id="bodywrapper" style="max-width:100%;min-width:1000px;overflow:auto;">

    <div id="leftpanel" style="width:20%;position:absolute;background-color:red;height:100%;left:0;top:0;min-width:200px">
    </div>

    <div id="rightpanel" style="width:80%;position:absolute;background-color:blue;height:100%;right:0;top:0;min-width:800px">
    </div>
</div>

这是早期未解决问题的更详细版本。我不确定为什么当页面宽度变窄时页面的某些部分呈现为看不见。据我所知，当 1000px 的 #bodywrapper 宽度被破坏并变得小于 1000px 时，min-width 标签应该会产生滚动条。相反，当页面缩小小于 1000 像素时，部分 div 会从页面中隐藏。感谢任何帮助，在这个问题上停留了一段时间。

Answer 1

您已经将宽度分别设置为 20% 和 80%。如果您删除两个 div 元素的“最小宽度”，您将得到您想要的。我还为两者添加了 float 。这是代码:

<div id="leftpanel" style="width:20%;float:left;position:absolute;background-color:red;height:100%;left:0;top:0">
</div>

<div id="rightpanel" style="width:80%;float:left;position:absolute;background-color:blue;height:100%;right:0;top:0">
</div>

这是 fiddle 的链接:https://jsfiddle.net/john_h/vqabukvj/2/

希望对您有所帮助。