<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;
heigth: 100vh;
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
hr {
width: 98%;
}
/*Основной контейнер*/
.plg_ATWAS {
position: relative;
min-width: 600px;
min-height: 300px;
overflow:visible;
background:#009933;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/*Верхняя общая панель*/
.plg_ATWAS_Up{
background: #EFEFFB;
height: 50px;
overflow:hidden;
padding: 3px;
}
/*Добавил Средний контейнер*/
.plg_Cont {
flex-grow: 1;
display: flex;
}
/*Левая часть*/
.plg_ATWAS_Left {
width:300px;
background:#eee;
border: 1px solid #000;
overflow: auto;
padding:0px;
}
/*Правая часть*/
.plg_ATWAS_Right {
background:MintCream ;
border: 1px solid #000;
overflow: auto;
flex-grow: 1;
}
/*Панель для поиска и функционала*/
.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; /* Цвет текста */
}
</style>
<script>
function Rz(p) {
var ch = $(document).height() - $('.plg_ATWAS').height();
$('.plg_ATWAS').height(p);
}
</script>
</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_Cont"> <!-- Добавил контейнер -->
<div class="plg_ATWAS_Left">
<div class="plg_ATWAS_LeftUp">
Верхняя панель левого фрейма
</div>
Левый фрейм
</div>
<div class="plg_ATWAS_Right">
<div class="plg_ATWAS_RightUp">
Верхняя панель правого фрейма
</div>
Правый фрейм
</div>
</div>
<div class="plg_ATWAS_Down">
Down Panel
<input type="button" value="Submit" onclick="Rz(300);">
<input type="button" value="Submit" onclick="Rz(400);">
<input type="button" value="Submit" onclick="Rz(800);">
</div>
</div>
</main>
<footer>Низ сайта</footer>
</body>
</html>