Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Фрейм в середине страницы подстраивающийся под размер ? (https://javascript.ru/forum/events/81975-frejjm-v-seredine-stranicy-podstraivayushhijjsya-pod-razmer.html)

Fastereus 24.02.2021 06:43
Фрейм в середине страницы подстраивающийся под размер ?
 
Всем привет , в общем есть одна задача а моихзнаний в JS просто не хватает, решил спросить Вас.

и так унас есть верстка страницы в применом виде :
<div> титул</div>
<div> меню</div>
<div> НАШ ФРЕЙМ</div>
<div> футер</div>

ничем кроме НАШЕГО ФРЕЙМА я управлять не могу, там доступны стили, скрипты все что хочешь, а вот с остальными вопрос, там и ID и Class элементов полное рандомное явление


в общем задача в том чтобы подстроить высоту НАШЕГО ФРЕЙМА так чтобы с учетом всего имевшегося так чтобы страница влазила с окно браузера, в нутрях окна сделан AJAX итерфейс и надо чтобы его разщмер был максимален но вся страница должна влазить в окно ....

на CSS такое не решить как никрути и придется прибегнуть к JS

Нужна кросплатформенность но с учетом лиш последних версий браузеров, всякий старый отстой не интересен, в основном предпологается ХРОМ, ЛИСА , и Яйцо отмикрософта

заранее спасибо

voraa 24.02.2021 08:13
Так попробуйте
<style>
#dt{
	position:relative;
	height: 25px;
	background-color: cyan;
}
#dm{
	position:relative;
	height: 20%;
	background-color: blue;
}
#df{
	position:relative;
	background-color: green;
}
</style>
<style>
body {
	position: relative;
	height: 100vh; 
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction:column;
}

#ourframe {
	background-color: red;
	position:relative;
	flex-grow: 1;
}
</style>
<body>
<div id=dt> титул</div>
<div id=dm> меню</div>
<div id=ourframe> НАШ ФРЕЙМ</div>
<div id=df> футер</div>
</body>

Fastereus 24.02.2021 08:41
voraa, А-А-А ...мы не можем тронуть стили имеющихся других кусков, классы , и вообщ еничего не можем ...
мы в своём куске можем только работать ито он обернут в <main> Но без атрибутов....
былобы возможно оперировать и идентификаторами или стилями я бы сюда не пришел :)

Пока мне пришла мысль в голову :
var ch=$(document).height()-$('.plg_ATWAS').height();

таким образом мы получаем размер нашего документа без нашего фрема (plg_ATWAS) это DIV c классом (кстати JQuery на борту есть )

вроде все хорошо и дальше можно сунуть $('.plg_ATWAS').height(число нужное) полученное вычитанием из $(window).height() передыдущего значения , но косяк в том что мой фрейм увеличивается , но при этом footer остается на месте :)

счас попробую выдрать кусок и разместить гденибудь для экспе рементов

voraa 24.02.2021 09:09
Так я их и не трогаю.
Специально оформил двумя разными style
Первый - тот который был задан не вами. Какие то там произвольные стили.
Это я их просто для примера так задал.

А второй style - это уже ваш. Там только body - к нему то всегда доступ можно иметь, и ваш див.

Цитата:
Сообщение от Fastereus
ито он обернут в <main> Но без атрибутов....
Ну какую структуру вы указали, про такую я и отвечаю.
Не зная точной структуры никто вам точно не ответит.

Fastereus 24.02.2021 09:31
Цитата:
Сообщение от voraa (Сообщение 534011)
Так попробуйте
<style>

body {
	position: relative;
	height: 100vh; 
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction:column;
}
Я об этом :)

в общем выдрал я страницу от тудова , убрал все что касалось визуализации меню и прочей не моей ереси и залил сюда http://fastereus.ru/test.html

и тут я увидел странную вещь что footer повисает и без работы скрипта,

три кнопки сунул ....

вотсижу теперь и думаю какого черта ...

voraa 24.02.2021 09:52
Так чего вы хотите то?
Что бы <main> занимал все оставшееся пространство?
Тогда 
main {
    position:relative;
    flex-grow: 1;
}

К main то так доступ получить можно.

Ну и у вас встречается такое
plg_ATWAS_Left {
    float: left;
    width: 300px;
    height: 99%;
    background: #eee;
    margin-right: -300px;
    border: 1px solid #000;
    overflow: auto;
    padding: 0px;
}

height: 99% - от чего 99%?
Если от родительского блока, то у этого блока должно стоять
position: relative; (или absolute)

Да и всякие float не нужны. Лучше flex использовать.

Fastereus 25.02.2021 03:50
voraa, да height это остаток от эксперемента ...

Сможите попраивть стили так чтобы панели имели максимальный размер (по высоте), а область div'а вложенного main занимала весь доступный размер окна ?

main не имеет вообще стиля , да именять я его по идее не могу... не знаю как к этому панель отнесется.

нет честно WEB вообще не моё... но иногда надо

http://fastereus.ru/test.html

Буду безумно вам благодарен ... хотя в рамках данного форум аответить нечем , я пром програмимист и микроэлектронщик :help:

voraa 25.02.2021 08:27 
<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>

Fastereus 26.02.2021 02:36
voraa, Вот в том тои проблема ... как страничка в хроме все запахало, а панель обругалась на попытку изменения body , main :(((
Не дает она менять эти стили , хоть и вшит хром но увы много чего залочено ... но хотя бы элементы из нутримэйна ведут себя прилично и приизменении размера футер не лезет по центру :)

счас попробую решить это скриптом :)

Спасибо ...

Fastereus 05.03.2021 03:45
voraa, Доброе время суток ... в общем заработать заработало ...
но с выводом контента внутря вышел жвак полный ...
кинул http://fastereus.ru/test.html
Почитал про предложденный метод раззметки вроде догнал , так же добавил еще понижней панельке
а по середине как бы фремй для контента , 
.plg_ATWAS_Content{
                overflow: auto;
            }


предпологал что если не будет влазить то пусть прокручивается с появлением скрол баров по auto , но даже принудительный overflow: scroll; не далникакого эффекта ... спаси бесталкового "верстальщика" ...

voraa 05.03.2021 11:45
Чего то сделал. То или не то - не совсем понимаю, т.к. точно не понял, что нужно. Но контент вроде умещается и роллингуется, когда надо.
<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 - имеют какое то сакральное значение. Без них как то не то все.
Но почему - пусть подскажут более опытные верстальщики.

рони 05.03.2021 11:50
Цитата:
Сообщение от voraa
src="http://code
может https?

voraa 05.03.2021 11:52
Цитата:
Сообщение от рони
может https?
Может. Я как код взял, так и дал. Он тут все равно не используется.

Fastereus 09.03.2021 02:41
Цитата:
Сообщение от рони (Сообщение 534345)
может https?
Не так и есть там все на HTTP работает ... это не савсем сайт это оболочка HMI панели на лине, там и JS странный прям очень JQuery на борту но опять же некоторые вещи не пашут ...

короче дивайс сам в себе ...

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

Вопрос , могли бы вы рекомендовать сайт/ книгу/ вообще место где можно освоить CSS ? имею общие понятия и всегда хватало , но вот финт показаный вамидо меня не дошел , а спрашивать и просить мне неприятно, по этому в место рыбы прошу у вас теперпь удочку ...

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


Часовой пояс GMT +3, время: 11:40.