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> 

Это более подробный вариант более ранней нераскрытым вопрос. Я не уверен, почему части страницы становятся невидимыми, когда ширина страницы становится более узкой. Насколько мне известно, тег min-width должен создавать полосу прокрутки, когда ширина #bodywrapper 1000px скомпрометирована и становится меньше 1000px. Вместо этого части divs скрываются от страницы, когда она сужается менее чем 1000 пикселей. Любая помощь приветствуется, застрял на этой проблеме некоторое время.

Answer 1

У вас уже установлена ​​ширина 20% и 80% соответственно. Если вы удалите «min-width» для обоих элементов 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> 

Вот ссылка на скрипку: https://jsfiddle.net/john_h/vqabukvj/2/

Надежда, что помогает.

Answer 2

Полезно продумать то, что вы на самом деле хотите. Поскольку в общем контейнере установлено значение переполнения x и y, то есть: переполнение: автоматически, и оно имеет минимальную ширину 1000 пикселей, вам нужно выбрать, хотите ли вы, чтобы ширина составляла 20%/80% для панелей, ИЛИ если вы хотите, чтобы они были минимальной: 200px/min-width: 800px. Обычно для макетов жидкого типа я бы использовал процентную ширину, так как уже указано, что минимальная ширина двух панелей в контейнере шириной 1000 пикселей будет составлять 200 пикселей/800 пикселей, если их ширина составляет 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-x: auto; т.е. переполнение горизонтально, но не вертикально.

На самом деле трудно точно знать, что вы намереваетесь здесь, хотите ли вы показывать прокрутку x и y? вы хотите, чтобы два столбца занимали всю высоту экрана, но не более того? Поплавки в этом случае будут создавать проблемы, как и абсолютное позиционирование. Трудно сказать без фактического описания желаемого результата макета конечной точки.

Answer 3

Вам просто нужно дать поплавок слева на левую панель, так как он занимает 20%, поэтому после 20% ширины он должен дать пространство другим и оставаться слева, так что другие 80% будут также видны в одном и том же кадре

вы можете попробовать этот код

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