这里是 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 会从页面中隐藏。感谢任何帮助,在这个问题上停留了一段时间。
最佳答案
您已经将宽度分别设置为 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/
希望对您有所帮助。
关于html - 页面宽度变窄时 Div 不产生滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32981274/