Форум

Fastereus · #1 (**permalink**) 24.02.2021, 06:43

Всем привет , в общем есть одна задача а моихзнаний в JS просто не хватает, решил спросить Вас.

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

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

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

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

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

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

voraa · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 24.02.2021, 09:09

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

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

Сообщение от Fastereus

ито он обернут в <main> Но без атрибутов....

Ну какую структуру вы указали, про такую я и отвечаю.
Не зная точной структуры никто вам точно не ответит.

Fastereus · #5 (**permalink**) 24.02.2021, 09:31

Сообщение от voraa

Так попробуйте

<style>

body {
	position: relative;
	height: 100vh; 
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction:column;
}

Я об этом

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

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

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

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

voraa · #6 (**permalink**) 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 · #7 (**permalink**) 25.02.2021, 03:50

voraa, да height это остаток от эксперемента ...

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

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

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

http://fastereus.ru/test.html

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

voraa · #8 (**permalink**) 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 · #9 (**permalink**) 26.02.2021, 02:36

voraa, Вот в том тои проблема ... как страничка в хроме все запахало, а панель обругалась на попытку изменения body , main

((
Не дает она менять эти стили , хоть и вшит хром но увы много чего залочено ... но хотя бы элементы из нутримэйна ведут себя прилично и приизменении размера футер не лезет по центру

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

Спасибо ...

Fastereus · #10 (**permalink**) 05.03.2021, 03:45

voraa, Доброе время суток ... в общем заработать заработало ...
но с выводом контента внутря вышел жвак полный ...
кинул http://fastereus.ru/test.html
Почитал про предложденный метод раззметки вроде догнал , так же добавил еще понижней панельке
а по середине как бы фремй для контента ,

.plg_ATWAS_Content{
                overflow: auto;
            }

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

Форум

Справочник

Discord чат

Курсы javascript