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元素的“min-width”，你将得到你想要的。我还为两者添加了浮点数。这是代码：

<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>

以下是小提琴的链接：https://jsfiddle.net/john_h/vqabukvj/2/

希望有所帮助。

Answer 2

仔细思考你真正想要的东西是有帮助的。由于整个容器设置为溢出x和y，即：溢出：自动，并且其最小宽度为1000px，接下来必须选择是否要将面板的宽度设置为20％/ 80％，或者如果你想让它们是最小宽度：200px / min-width：800px。一般来说，对于液体类型的布局，我选择宽度百分比，因为已经给出了容器中最小宽度为1000px的两个面板的最小宽度，如果它们的宽度已经是200px / 800px是20％/ 80％。

<div id="bodywrapper" style="min-width:1000px;overflow:auto;position:relative;">

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

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

</div>

但是请注意，如果在主容器div上设置overflow：auto，如果页面高于浏览器显示窗口高度，它将溢出y，即垂直。我猜你真的想要：overflow-x：auto;即水平溢出但不垂直溢出。

实际上很难确切地知道你打算在这里打算做什么，但是，你想让显示器滚动x和y吗？你想要两列占据整个屏幕的高度，但是没有更多吗？在这种情况下浮动会产生问题，绝对定位也会产生问题。如果没有对所需结束布局结果的任何实际描述，很难说。

Answer 3

你只需要给左侧面板留下浮动，因为它需要20％所以在20％的宽度之后它应该给其他人留出空间并留在左边，所以其他80％也会在同一帧中看到< / p>

你可以试试这段代码

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

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

当页面宽度变窄时，Div不生成滚动条

3 个答案: