Фрейм в середине страницы подстраивающийся под размер ?
Всем привет , в общем есть одна задача а моихзнаний в JS просто не хватает, решил спросить Вас.
и так унас есть верстка страницы в применом виде : <div> титул</div> <div> меню</div> <div> НАШ ФРЕЙМ</div> <div> футер</div> ничем кроме НАШЕГО ФРЕЙМА я управлять не могу, там доступны стили, скрипты все что хочешь, а вот с остальными вопрос, там и ID и Class элементов полное рандомное явление в общем задача в том чтобы подстроить высоту НАШЕГО ФРЕЙМА так чтобы с учетом всего имевшегося так чтобы страница влазила с окно браузера, в нутрях окна сделан AJAX итерфейс и надо чтобы его разщмер был максимален но вся страница должна влазить в окно .... на CSS такое не решить как никрути и придется прибегнуть к JS Нужна кросплатформенность но с учетом лиш последних версий браузеров, всякий старый отстой не интересен, в основном предпологается ХРОМ, ЛИСА , и Яйцо отмикрософта заранее спасибо |
Так попробуйте
<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>
|
voraa, А-А-А ...мы не можем тронуть стили имеющихся других кусков, классы , и вообщ еничего не можем ...
мы в своём куске можем только работать ито он обернут в <main> Но без атрибутов.... былобы возможно оперировать и идентификаторами или стилями я бы сюда не пришел :) Пока мне пришла мысль в голову :
var ch=$(document).height()-$('.plg_ATWAS').height();
таким образом мы получаем размер нашего документа без нашего фрема (plg_ATWAS) это DIV c классом (кстати JQuery на борту есть ) вроде все хорошо и дальше можно сунуть $('.plg_ATWAS').height(число нужное) полученное вычитанием из $(window).height() передыдущего значения , но косяк в том что мой фрейм увеличивается , но при этом footer остается на месте :) счас попробую выдрать кусок и разместить гденибудь для экспе рементов |
Так я их и не трогаю.
Специально оформил двумя разными style Первый - тот который был задан не вами. Какие то там произвольные стили. Это я их просто для примера так задал. А второй style - это уже ваш. Там только body - к нему то всегда доступ можно иметь, и ваш див. Цитата:
Не зная точной структуры никто вам точно не ответит. |
Цитата:
в общем выдрал я страницу от тудова , убрал все что касалось визуализации меню и прочей не моей ереси и залил сюда http://fastereus.ru/test.html и тут я увидел странную вещь что footer повисает и без работы скрипта, три кнопки сунул .... вотсижу теперь и думаю какого черта ... |
Так чего вы хотите то?
Что бы <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 использовать. |
voraa, да height это остаток от эксперемента ...
Сможите попраивть стили так чтобы панели имели максимальный размер (по высоте), а область div'а вложенного main занимала весь доступный размер окна ? main не имеет вообще стиля , да именять я его по идее не могу... не знаю как к этому панель отнесется. нет честно WEB вообще не моё... но иногда надо http://fastereus.ru/test.html Буду безумно вам благодарен ... хотя в рамках данного форум аответить нечем , я пром програмимист и микроэлектронщик :help: |
<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>
|
voraa, Вот в том тои проблема ... как страничка в хроме все запахало, а панель обругалась на попытку изменения body , main :(((
Не дает она менять эти стили , хоть и вшит хром но увы много чего залочено ... но хотя бы элементы из нутримэйна ведут себя прилично и приизменении размера футер не лезет по центру :) счас попробую решить это скриптом :) Спасибо ... |
voraa, Доброе время суток ... в общем заработать заработало ...
но с выводом контента внутря вышел жвак полный ... кинул http://fastereus.ru/test.html Почитал про предложденный метод раззметки вроде догнал , так же добавил еще понижней панельке а по середине как бы фремй для контента ,
.plg_ATWAS_Content{
overflow: auto;
}
предпологал что если не будет влазить то пусть прокручивается с появлением скрол баров по auto , но даже принудительный overflow: scroll; не далникакого эффекта ... спаси бесталкового "верстальщика" ... |
| Часовой пояс GMT +3, время: 02:46. |