Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div 100% высоты родителя / 13 сообщений из 13, страница 1 из 1
21.08.2013, 15:26
    #38373456
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
Здравствуйте.
Переделыаваю разметку страницы с table на div (под html5).
Приложил архив с 2-мя файлами:
tmpTable.html - это то что мне нужно получить с помощью div-ов (размечено таблицами). Страница правильно отображается только в Chrom-е.
tmpDIV.html - это страница с div разметкой которая должна выглядеть так же как tmpTable.html в Chrom-е.
С разметкой div-ами такая проблема: когда я ставлю высоту блока 100% - то имею ввиду 100% оставшейся высоты родителя. Т.е. пытаюсь просто заполнить всю оставшуюся высоту родительского блока. Браузеры же считают что это 100% видимой области.
В результате центральный блок тянется ниже подвала и появляется прокрутка страницы. Вёрстку хочу сделать резиновой поэтому размеры центральной области не должны быть заданы в пикселях .

Вопросы:

1. Как заставить div брать за 100% оставшиеся размеры родителя ,а не размеры видимой области браузера?
2. Можно ли сделать требуемую разметку без использования скрипта ? Можно попробовать найти размеры клиентской области пользователя и вычислить размеры в пикселях, но это как последний вариант.

Решение должно работать в ie,ff,chrome,opera. Можно только последних версий.Старые версии браузеров не интересуют пока.
Если можно сделать так что бы табличная разметка заработала во всех 4 браузерах так же как в Chrom-е - то такое решение то же подходит.

Привожу сокращённый вариант файлов:

 
Разметка таблицами
<!DOCTYPE HTML>
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>



<style type="text/css">
*
{
margin: 0;
padding: 0;
outline: none;
}

html, body
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

table
{
border-width: 1px;
border-style: outset;
border-color: gray;
margin: 0 auto;
width: 100%;
height: 100%;
}

td
{
border-width: 1px;
border-style: inset;
border-color: gray;
margin: 0;
padding: 0;
}

div
{
display: inline-block;
}

.maxWidth
{
width: 100%;
}

.maxHeight
{
height: 100%;
}


.logo
{
width: 15%;
height: 15%;
}

.paramsCell
{
width: 20%;
background: blue;
}

.paramsContent
{
overflow: auto;
position: relative;
background: green;
float: left;
}

.treeCell
{
width: 15%;
vertical-align: top;
background: blue;
}

.treeContent
{
overflow: auto;
position: relative;
background: red;
float: left;
}

.contentCell
{
vertical-align: top;
background: blue;
}

.content
{
overflow: auto;
position: relative;
background: yellow;
float: left;
}
</style>


</head>

<body>

<table>

<tr>
<td class="logo">logo</td>
<td colspan="2">top contact</td>
</tr>

<tr>
<td rowspan="3" class="treeCell maxHeight">

<div class="treeContent maxHeight maxWidth">
tree </br> tree </br>
........
Длинное дерево ......

</div>

</td>
<td>serch</td>
<td rowspan="3" class="paramsCell">
<div class="paramsContent maxHeight maxWidth">
params </br> params </br>
......
Много параметров.......

</div>
</td>
</tr>

<tr>
<td>site map</td>
</tr>

<tr>
<td class="contentCell maxHeight">
<div class="content maxHeight maxWidth">
<h2>Index</h2>
text text text ......
Много много текста....
</div>
</td>
</tr>

<tr>
<td colspan="3">footer</td>
</tr>

</table>
</body>
</html>



 
Разметка div-ами

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>



<style type="text/css">
*
{
margin: 0;
outline: none;
}

html,
body
{
height: 100%;
width: 100%;
}


header, nav, section, article, aside, footer, div
{
display: block;
position: relative;
}



#main
{
width: 100%;
min-height: 100%;
height: 100%;
background: lightgrey;
}
/*1232*/

.header
{
background: yellow;
height: 120px;
overflow: hidden;
}

.logo
{
background: blue;
width: 15%;
height: 120px;
float: left;
overflow: hidden;
}

.contacts
{
background: green;
width: 85%;
height: 120px;
float: right;
overflow: hidden;
}

.tree
{
background: orange;
width: 15%;
height: 100%;
float: left;
overflow: auto;
}

.content
{
background: white;
width: 100%;
height: 100%;
float: left;
bottom: 0px;
overflow: auto;
/*margin-top: 36px;*/
}

.params
{
background: blue;
width: 20%;
height: 100%;
float: right;
overflow: auto;
}

.footer
{
background: yellow;
bottom: 0;
width: 100%;
overflow: hidden;
}

.dataWrap
{
background: lime;
height: 100%;
width: 100%;
overflow: hidden;
}

.serch
{
background: azure;
width: 100%;
overflow: hidden;
}

.map
{
background: darkgrey;
width: 100%;
overflow: hidden;
}

.contentWrap
{
width: 65%;
height: 100%;
float: left;
overflow: hidden;
padding-bottom: 54px;
}


</style>
</head>
<body>

<div id="main" class="cf">

<header class="header">
<section class="logo">logo</section>
<section class="contacts">contacts</section>
</header>

<section class="dataWrap">
<section class="tree">
tree </br> tree </br>
........
Длинное дерево ......
</section>

<section class="contentWrap">

<section class="serch">serch</section>
<nav class="map">map</nav>

<section class="content">
<h1>Index</h1>
text text text ......
</section>
</section>

<section class="params">
params </br> params </br>
......
Много параметров.......
</section>
</section>

<footer class="footer">foot </footer>
</div>


</body>
</html>



Заранее спасибо за ответы.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.08.2013, 15:30
    #38373471
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
S_A_V_e , нет такого понятия как "100% оставшейся высоты"... Есть только размеры родителя, по ним все и определяется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.08.2013, 15:35
    #38373477
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
S_A_V_eРазметка таблицами ...
Даже это у тебя фуфлыжное... Не помещается на экране, появляется скрол...

Если нужно сделать:
- объявляй цену
- описывай точно что нужно

Глядишь и желающие найдутся...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.08.2013, 15:37
    #38373485
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
S_A_V_e , как вариант - воспользуйся этим конструктором ...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.08.2013, 15:40
    #38373492
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
S_A_V_e , тут есть описание некоторых приемов...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.08.2013, 23:15
    #38373966
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
krvsaкак вариант - воспользуйся этим конструктором...

Конструктор этот я пробовал. Он не делает то что мне нужно.

krvsaнет такого понятия как "100% оставшейся высоты"...


Я знаю что нет такого понятия. Но раньше таблицы прекрасно понимали (при вложении например) что 100% - это оставшееся место в ячейке если в ней ещё что то лежит.

krvsa тут есть описание некоторых приемов...


За ссылочку спасибо. Действительно полезная информация. Накопал height: calc(...). С его помощью сделал шаблон как мне нужно в ie,ff,chrome. Но вот opera пока не поддерживает... Придётся придумывать что то ещё.

 
css
.....
.dataWrap
{
background: lime;
height: calc(100% - 140px);
width: 100%;
overflow: hidden;
}
.....
.contentWrap
{
width: 65%;
height: calc(100% - 36px);
float: left;
overflow: hidden;
padding-bottom: 54px;
}
....


krvsaДаже это у тебя фуфлыжное...


Я не силён в разметке. Ничего сложного на html делать не приходилось. До ума её довести не получилось. Поэтому и оговорил специально , что смотреть нужно только в хроме. Это только макет того что мне нужно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2013, 08:40
    #38374091
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
S_A_V_eНо раньше таблицы прекрасно понимали (при вложении например) что 100% - это оставшееся место в ячейке если в ней ещё что то лежит.
Поверь, с тех пор они хуже не стали...

S_A_V_eНакопал height: calc(...).
ППЦ!

S_A_V_eЯ не силён в разметке.
Значит самое время начать качаться.

Или готовить деньги...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2013, 13:47
    #38374594
Gustly
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
krvsaS_A_V_eНакопал height: calc(...).
ППЦ!

Вы хотите сказать это основы основ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2013, 13:52
    #38374603
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
Вот теперь без всяких calc(...) и лишних обёрток. Работает во всех браузерах. Для тех кто столкнётся с теми же проблемами... Коротко решение такое: ставить блокам position:absolute/fixed и использовать не height width в размерах блоков, а управлять размерами с помощью top,left,right,bottom.

 
сокращённый пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>



<style type="text/css">
*
{
margin: 0;
outline: none;
}

html,
body
{
height: 100%;
width: 100%;
}


header, nav, section, article, aside, footer, div
{
display: block;
position: relative;
}



#main
{
width: 100%;
min-height: 100%;
height: 100%;
background: lightgrey;
}
/*1232*/

.header
{
background: yellow;
height: 120px;
overflow: hidden;
}

.logo
{
background: blue;
position: absolute;
left: 0px;
right: 85%;
height: 120px;
float: left;
overflow: hidden;
}

.contacts
{
background: green;
position: absolute;
left: 15%;
right: 0px;
height: 120px;
float: right;
overflow: hidden;
}

.tree
{
background: orange;
position: absolute;
top: 120px;
left: 0px;
right: 85%;
bottom: 18px;
float: left;
overflow: auto;
}

.content
{
background: white;
position: absolute;
top: 156px;
left: 15%;
right: 20%;
bottom: 18px;
float: left;
overflow: auto;
}

.params
{
background: blue;
position: absolute;
top: 120px;
left: 80%;
right: 0px;
bottom: 18px;
float: right;
overflow: auto;
}

.footer
{
background: yellow;
position: fixed;
left: 0px;
right: 0px;
bottom: 0;
overflow: hidden;
}


.serch
{
background: azure;
position: absolute;
left: 15%;
right: 20%;
float: left;
overflow: hidden;
}

.map
{
background: darkgrey;
position: absolute;
top: 138px;
left: 15%;
right: 20%;
float: left;
overflow: hidden;
}
</style>
</head>
<body>

<div id="main">

<header class="header">
<section class="logo">logo</section>
<section class="contacts">contacts</section>
</header>

<section class="tree">
tree </br> tree </br>
tree </br> tree </br>
........
tree </br> end
</section>

<section class="serch">serch</section>
<nav class="map">map</nav>

<section class="content">
<h1>Index</h1>
text text text
....
end
</section>

<section class="params">
params
<br />
params
<br />
params </br> params </br>
params </br> params </br>
..........
params </br> end
</section>

<footer class="footer">foot </footer>

</div>


</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2013, 14:54
    #38374750
Gustly
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
S_A_V_eуправлять размерами с помощью top,left,right,bottom.

Ну зачем использовать свойства не по назначению?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2013, 16:17
    #38374934
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
GustlyВы хотите сказать это основы основ?
Я хочу сказать, что ты не туда роешь...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2013, 16:20
    #38374939
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
GustlyНу зачем использовать свойства не по назначению?


У меня не получилось разметить страницу используя height width (без использования calc()). Как то нелогично (с моей конечно точки зрения) ведут себя элементы при задании высоты/ширины. left,right,... гораздо надёжнее работают во всех браузерах. Я не утверждаю что надо только так, просто такой вариант разметки оказался наиболее предсказуемым и работоспособным.
Предложите другой вариант. Может я что то и не докопал в этой теме...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2013, 16:21
    #38374941
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div 100% высоты родителя
S_A_V_eВот теперь без всяких calc(...)
Уже лучше.

S_A_V_eДля тех кто столкнётся с теми же проблемами...
Лучше такое не показывать широкой аудитории, тем паче в интерпретации "как нужно делать"...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div 100% высоты родителя / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 444ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1447978]:
 0ms
get settings:
 7ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 169ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 32ms
get tp. blocked users:
 1ms
others: 202ms
total:  444ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]