Чего то сделал. То или не то - не совсем понимаю, т.к. точно не понял, что нужно. Но контент вроде умещается и роллингуется, когда надо.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style>
html, body {/* Стандартизация оформления*/
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {/* Тело сайта */
/* overflow: auto; добавить полосу прокрутки */
font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы на странице */
}
header { /* Верхний блок заголовка */
background: #0080c0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
header:empty{ /* Если блок заголовка пустой то скрываем его */
display:none;
}
nav { /* Навигация (хлебные крошки))*/
background: gray; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
nav:empty{ /* Если блок навигации пустой то скрываем его */
display:none;
}
main { /* Основной контент */
}
main:empty{ /* Если блок основного контента пустой то скрываем его */
display:none;
}
footer { /* Нижний блок */
background: #333; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
}
footer:empty{ /* Если нижний блок пустой то скрываем его */
display:none;
}
/* Правил отсюда */
body {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
}
hr {
width: 98%;
}
/*Основной контейнер*/
.plg_ATWAS {
position: relative;
min-width: 600px;
min-height: 300px;
background:#009933;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/*Верхняя общая панель*/
.plg_ATWAS_Up{
background: #EFEFFB;
height: 50px;
overflow:hidden;
padding: 3px;
}
/*Контейнер в которм будет распологоаться левая и правая панель*/
.plg_ATWAS_Middle {
display: flex;
flex: 1 1 auto;
overflow-y: auto;
}
/*Левая часть*/
.plg_ATWAS_Left {
background:#eee;
border: 1px solid #000;
padding:0px;
flex: 0 0 300px;
display: flex;
flex-direction: column;
}
/*Правая часть*/
.plg_ATWAS_Right {
background:MintCream ;
border: 1px solid #000;
display: flex;
flex-direction: column;
position: relative;
}
/*Панель для поиска и функционала*/
.plg_ATWAS_Down{
clear: left;
background: #EFEFFB;
height: 50px;
overflow:hidden;
padding: 3px;
}
/*Верхняя панель левого фрейма*/
.plg_ATWAS_LeftUp {
position: relative; /* Фиксированное положение */
padding: 10px; /* Поля вокруг текста */
background: #6E6E6E; /* Цвет фона */
color: #fff; /* Цвет текста */
}
/*Верхняя панель левого фрейма*/
.plg_ATWAS_RightUp {
position: relative; /* Фиксированное положение */
padding: 10px; /* Поля вокруг текста */
background: #6E6E6E; /* Цвет фона */
color: #fff; /* Цвет текста */
}
.plg_ATWAS_Middle1 {
flex: 1 1 auto;
overflow-y: auto;
}
</style>
</head>
<body>
<header><h1>ЗАГОЛОВОК САЙТА</h1></header>
<nav>МЕНЮХА</nav>
<main>
TEST MODULE
<hr><br>
<h1>ATWAS Plugin testing...</h1>
<div class="plg_ATWAS">
<div class="plg_ATWAS_Up">Верхнеяя панель</div>
<div class="plg_ATWAS_Middle">
<div class="plg_ATWAS_Left">
<div class="plg_ATWAS_LeftUp">Верхняя панель левого фрейма</div>
<div class="plg_ATWAS_Middle1">
<!--<div class="plg_ATWAS_Content">-->
Левый фрейм
<!-- </div> -->
</div>
<div class="plg_ATWAS_LeftUp">Нижняя панель левого фрейма</div>
</div>
<div class="plg_ATWAS_Right">
<div class="plg_ATWAS_RightUp">Верхняя панель правого фрейма</div>
<div class="plg_ATWAS_Middle1">
<div class="plg_ATWAS_Content">
Правый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фреймПравый фрейм
</div>
</div>
<div class="plg_ATWAS_LeftUp">Нижняя панель правого фрейма</div>
</div>
</div>
<div class="plg_ATWAS_Down">Down Panel<input type="button" value="Submit" onclick="Rz();"></div>
</div>
</main>
<footer>Низ сайта</footer>
</body></html>
overflow-y: auto в строках 54, 85, 135 - имеют какое то сакральное значение. Без них как то не то все. Но почему - пусть подскажут более опытные верстальщики. |
Цитата:
|
Цитата:
|
Цитата:
короче дивайс сам в себе ... |
voraa, Еще раз большое спасибо Вам, все работает , в логах ругается на стили что меняем у глобалки но это уже не важно ...
Вопрос , могли бы вы рекомендовать сайт/ книгу/ вообще место где можно освоить CSS ? имею общие понятия и всегда хватало , но вот финт показаный вамидо меня не дошел , а спрашивать и просить мне неприятно, по этому в место рыбы прошу у вас теперпь удочку ... |
Интересный вопрос.
Как справочники https://developer.mozilla.org/ru/docs/Web/CSS/Reference https://html5book.ru/css-css3/ |
| Часовой пояс GMT +3, время: 21:34. |