высота в %

[shaci]

Добрый день,

возник такой вопрос, есть например такая верстка

<div id = "container">
<div id = "header" >Header here</div>
<div id = "content">CONTENT CONTENT CONTENT</div>
</div>

Если указать высоту для container например 50%, или 500 px

то указание высоты для дива с id=header в 20 или, например 50% будет менять высоту этого дочернего дива, т.к. она будет считаться относительно родителя.

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

Возможно ли как то не указывать высоту родительскому диву, но чтобы при этом указание высоты в 20% у дочернего дива действительно давало 20%.

Т.е. такая "изващенная" логика: родительский див растягивается по своему контенту в высоту (а это 2 дива дочерних, высота которых если не указана - вычисляется по контенту, если указана явно - то задается явно (например 50px)), и затем (предположим, что у дочернего дива header - 20%) происходит расчет высоты этого дива от получившейся высоты родителя, вот так.

[Switch74]

т.е. ты хочешь, чтобы header был в процентах от размера родителя который растягивается самим header + content.

ты понимаешь, что это бесконечный цикл получится и у тя container будет увеличиваться до бесконечности.

к тому же представь, что у тебя container растянется и будет большим, и header согласно указанию займет 20%, предположим 20% от container это высота окна браузера, а то еще больше. т.е. чтобы увидеть контент придется прокручивать этот здоровый header.

надеюсь ты понял что я пытался тебе объяснить, вывод: так сделать нельзя, а если бы и можно было бы, то это было бы бессмысленным.

[shaci]

т.е. ты хочешь, чтобы header был в процентах от размера родителя который растягивается самим header + content.

ты понимаешь, что это бесконечный цикл получится и у тя container будет увеличиваться до бесконечности.

к тому же представь, что у тебя container растянется и будет большим, и header согласно указанию займет 20%, предположим 20% от container это высота окна браузера, а то еще больше. т.е. чтобы увидеть контент придется прокручивать этот здоровый header.

надеюсь ты понял что я пытался тебе объяснить, вывод: так сделать нельзя, а если бы и можно было бы, то это было бы бессмысленным.

да, я понял, я как раз так и думал, что по кругу получается идем, но вдруг

Edited February 21, 2012 by shaci

[shaci]

Еще вопрос возник,

указал например width:300px и height:300px родителю;

и диву с id = header height:20%,

Т.Е. вот так:

<div id = "conteiner" style = "height:300px; width:300px">
<div id = "header" style = "height:20%"><h1>Header content</h1></div>
<div id = "content" style = "height:80%"><span>This is a main Content</span></div>
</div>

но у верхнего вложенного дива высота в данном случае получается меньше высоты заголовка(h1), который его дочерний элемент, (из-за margin, по крайней мере в FF это наблюдаю)

+ очень важно, родительскому диву даю margin-top, может здесь какое-нибуть схлопывание/вываливание (http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/) marginов проявляется

UPD:

схлопывания не наблюдаю(воззможно только в IE, там происходит вываливание h1 за пределы родителя , а в FF margin-top h1 приводит к тому, что заголовок отстает от верхней границы главного дива)

Edited February 21, 2012 by shaci

[shaci]

Еще вопрос возник,

указал например width:300px и height:300px родителю;

и диву с id = header height:20%,

Т.Е. вот так:

<div id = "conteiner" style = "height:300px; width:300px">
<div id = "header" style = "height:20%"><h1>Header content</h1></div>
<div id = "content" style = "height:80%"><span>This is a main Content</span></div>
</div>

но у верхнего вложенного дива высота в данном случае получается меньше высоты заголовка(h1), который его дочерний элемент, (из-за margin, по крайней мере в FF это наблюдаю)

+ очень важно, родительскому диву даю margin-top, может здесь какое-нибуть схлопывание/вываливание (http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/) marginов проявляется

UPD:

схлопывания не наблюдаю(воззможно только в IE, там происходит вываливание h1 за пределы родителя , а в FF margin-top h1 приводит к тому, что заголовок отстает от верхней границы главного дива)

Разобрался, всё таки это было вываливание марджина