Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.03.2021, 10:45
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,110

Чего то сделал. То или не то - не совсем понимаю, т.к. точно не понял, что нужно. Но контент вроде умещается и роллингуется, когда надо.
<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, 05.03.2021 в 11:57.
Ответить с цитированием
  #12 (permalink)  
Старый 05.03.2021, 10:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,173

Сообщение от voraa
src="http://code
может https?
Ответить с цитированием
  #13 (permalink)  
Старый 05.03.2021, 10:52
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,110

Сообщение от рони
может https?
Может. Я как код взял, так и дал. Он тут все равно не используется.
Ответить с цитированием
  #14 (permalink)  
Старый 09.03.2021, 01:41
Новичок на форуме
Отправить личное сообщение для Fastereus Посмотреть профиль Найти все сообщения от Fastereus
 
Регистрация: 24.02.2021
Сообщений: 8

Сообщение от рони Посмотреть сообщение
может https?
Не так и есть там все на HTTP работает ... это не савсем сайт это оболочка HMI панели на лине, там и JS странный прям очень JQuery на борту но опять же некоторые вещи не пашут ...

короче дивайс сам в себе ...
Ответить с цитированием
  #15 (permalink)  
Старый 11.03.2021, 01:25
Новичок на форуме
Отправить личное сообщение для Fastereus Посмотреть профиль Найти все сообщения от Fastereus
 
Регистрация: 24.02.2021
Сообщений: 8

voraa, Еще раз большое спасибо Вам, все работает , в логах ругается на стили что меняем у глобалки но это уже не важно ...

Вопрос , могли бы вы рекомендовать сайт/ книгу/ вообще место где можно освоить CSS ? имею общие понятия и всегда хватало , но вот финт показаный вамидо меня не дошел , а спрашивать и просить мне неприятно, по этому в место рыбы прошу у вас теперпь удочку ...
Ответить с цитированием
  #16 (permalink)  
Старый 11.03.2021, 06:21
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,110

Интересный вопрос.
Как справочники
https://developer.mozilla.org/ru/docs/Web/CSS/Reference
https://html5book.ru/css-css3/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить "прокручивание" содержимого страницы под модальным окном? rebroff Элементы интерфейса 6 22.11.2017 16:03
Окно под размер картинки. DelJf Javascript под браузер 3 27.05.2012 20:27
how? размер поля под размер содержимого boJlb Events/DOM/Window 4 24.10.2011 16:59
Подстроить высоту страницы под юзера, прошу совета у гуру batonsu Events/DOM/Window 11 10.11.2010 18:39
Открытие нового окна под размер изображения Не_Робот Events/DOM/Window 10 30.04.2009 00:16