У меня проблема с стилями с использованием CSS. У меня есть сайт, который состоит из 4 основных областей и 1 общей площади. я упростил код и добавил код цвета в каждой области, чтобы получить более быстрый обзор, но основные направления там с CSS выглядит следующим образом:HTML CSS Div Переполнение и положение «исправлено»
.madegamesDiv {
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
width: 100%;
min-width: 1200px;
height: 34px;
background-color: #778013;
border-bottom: 1px solid #39950E;
}
.allDiv {
position: fixed;
top: 35px;
left: 0px;
width: 100%;
height: 100%;
min-width: 1200px;
min-height: 850px;
background-color: #39950E;
overflow: scroll;
}
.leftDiv {
position: absolute;
z-index: 1;
height: 775px;
float: left;
width: 200px;
overflow: hidden;
position: fixed;
padding: 5px;
background-color: #FFFF00;
}
.topDiv {
min-width: 1000px;
position: fixed;
left: 200px;
top: 35px;
height: 150px;
overflow: hidden;
background-color: #FF00FF;
}
.mainDiv {
width: 100%;
min-width: 800px;
max-width: calc(100% - 500px);
background-color: #FFFFFF;
position: fixed;
left: 50%;
margin-left: calc((100% - 500px)/2*(-1));
top: 160px;
height: calc(100% - 180px - 27px);
overflow: auto;
border: 1px solid #225909;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
padding: 10px;
background-color: #FF0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<div id="madegamesDiv" class="madegamesDiv"></div>
<div id="all" class="allDiv">
<div id="left" class="leftDiv">
<p>Menu Area</p>
</div>
<div style="position:absolute;left:200px;height:100%;top:0px;">
<div id="top" class="topDiv">
<p>Top Area with logo and other stuff</p>
</div>
<div id="main" class="mainDiv">
<h1>Main Area</h1>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
</div>
</div>
</div>
</body>Основной областью main является область с наибольшим содержанием. Он должен быть прокручиваемым. Но теперь моя проблема: как я мог понять, когда окно браузера слишком мало, что все области отображаются правильно? Я думал о создании общей площади all прокручиваемый с помощью CSS overflow:auto; или overflow:scroll;. Но это не работает. Я думаю, проблема в том, что остальные области position:fixed, и поэтому общая площадь all не распознает размер других областей. Трудно объяснить, надеюсь, вы можете понять, что я пытаюсь объяснить. Есть ли способ отображения полос прокрутки, когда окно слишком мало? Заранее благодарим за помощь. Если какой-то код отсутствует или что-то неясно, не стесняйтесь спрашивать.
, если его о структурировании экрана, то вы могли бы использовать самозагрузки-сетку структурировать расположение экрана. Просто предложение позволяет легко управлять. –
Я никогда не использую 'position: absolute' и' position: fixed', и его следует использовать очень редко, когда макет страницы не является «абсолютным» или «фиксированным». Они обычно используются в элементах пользовательского интерфейса, но никогда не относятся к макету страницы. (Это не значит, что это невозможно) Кажется, что на основе вашего стиля программирования вы очень новичок в этом. Я бы предложил изучить структуру Bootstrap, понять, как это делается, и применить ее к проблеме выше. То, что вы делаете, - это просто стандартный макет страницы, может помочь Bootstrap. – guest
_ «Я думаю, что проблема в том, что другие области расположены: фиксированные, и поэтому общая площадь все не распознает размер других областей» _ Правильно. Родительский Контейнер не знает размеры своего ребенка, когда ребенок находится в положении: исправлено –