Jump to content
  • 0

Как полностью заполнить область область родительского блока дочерними


demoncheg
 Share

Question

Имеется фиксированный двухколоночный макет. Левая колонка - сайдбар, правая - контент. Вверху шапка, внизу "прилепленный" к низу футер. Все блоки, кроме футера, обёрнуты в #container, от которого позиционируется футер. Проблема в том, что дочерние блоки (сайдбар и контент) не фиксированные, и если один из них имеет бОльшую высоту, он "выезжает" за границу #container. Таким образом, футер оказывается парящим посреди экрана, в то время как выезжающий блок - уходит за нижнюю границу экрана.

Задача

Полностью вместить все дочерние блоки в родительский, чтоб они не выезжали, в то время как нижняя граница самого "высокого" из них должна совпадать с границей #container.

Решение

Пробовал overflow: hidden. Не устраивает, что блок обрезается, другие атрибуты overflow тоже не подходят. Пробовал даже вот так:

#container {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}

#container: after {
display: block;
visibility: hidden;
content: ".";
clear: both;
height: 0;
font-size: 0;
}

Но, к сожалению, безрезультатно. Подскажите, пожалуйста, кто знает, - бьюсь уже 3-й день...

Edited by demoncheg
Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

а футеру

clear:both;

должно же помочь.

Ну, вроде да, должно помочь... Но, наверное, что-то мешает позиционировать таким образом футер. В общем, выглядит так - тыц. Только что в голову пришло, может, проблема в:


#menu_blocks {
position: absolute;
}

Но если убрать absolute, блок с контентом проваливается вниз (в реальном макете). Может, как-то можно прийти к компромиссу? :)

savinzeek, не весь, но он есть по ссылке. В принципе, там проблему видно невооружённым взглядом.

UPD: ну да, проблема, видать, в position: absolute... (Хотя блок всё равно выезжает за границы родителя, но хотя бы футер клеется к его низу.) Тогда как же эти 2 блока - меню и контент - на одном уровне выровнять? Через float?

Edited by demoncheg
Link to comment
Share on other sites

  • 0

все правильно, вы абсолютом повесили сайдбар, он не учитывает теперь наличие футера. Теперь вам надо прибить нормально футер к низу.

Посмотрите, здесь много всяких приемов.

http://forum.htmlbook.ru/index.php?showtopic=5870

Link to comment
Share on other sites

  • 0

UPD: ну да, проблема, видать, в position: absolute... (Хотя блок всё равно выезжает за границы родителя, но хотя бы футер клеется к его низу.) Тогда как же эти 2 блока - меню и контент - на одном уровне выровнять? Через float?

Да, тут наверное лучше флоатами их расставить по местам.

Link to comment
Share on other sites

  • 0

Да, тут наверное лучше флоатами их расставить по местам.

А других способов точно нет? У меня меню в сайдбаре уже флоатами выровнены. Пробую выравнивать родительские блоки - получается какая-то белиберда.

Link to comment
Share on other sites

  • 0

inline-block еще сделает вам две колонки

Не понимаю... не фурычит. Задавал инлайн-блок и для родителя (контейнера), и для контента, и для сайдбара, по отдельности и вместе - нихт ферштейн.

Link to comment
Share on other sites

  • 0

так, а чем же все-таки overflow:hidden не устраивает вас? Что в нем не так?

Ну, вы посмотрите как в лисе выглядит - блок режется по границе родителя. Выглядит, мягко говоря, не очень.

ЗЫ: Не совсем понял, а что по ссылке?

Link to comment
Share on other sites

  • 0

так, а чем же все-таки overflow:hidden не устраивает вас? Что в нем не так?

Ну, вы посмотрите как в лисе выглядит - блок режется по границе родителя. Выглядит, мягко говоря, не очень.

ЗЫ: Не совсем понял, а что по ссылке?

Я не понимаю. Ну да, overflow обрезает все, что не входит в него. Вам надо, чтобы какой-то блок выходил за его пределы?

По ссылке пример решения на инлайн-блоках

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

Link to comment
Share on other sites

  • 0

Я не понимаю. Ну да, overflow обрезает все, что не входит в него. Вам надо, чтобы какой-то блок выходил за его пределы?

Ну, мне надо, чтобы самый высокий блок либо оставался в пределах родителя, а не выезжал из него, либо выезжал, но от него позиционировался футер. Просто первый способ мне показался наименее трудным. :) Но вообще основная задача прибить футер к низу, не порушив вёрстку, а как это сделать - уже вторично.

Оверфлоу режет блоки по границе родителя, в лисе по крайней мере, что не есть гуд.

По ссылке пример решения на инлайн-блоках

Хм, не заметил там колонок, блоки же идут друг под другом.

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

А как связаться с вами приватно? Личку тут что-то не могу найти...

Link to comment
Share on other sites

  • 0

не дописал в почте. Я бы полностью переверстал этот макет. Много там всего ненужного)

Да уж, код - сам по себе, коллекция ненужностей. Но перевёрстывать рабочий вариант?! Увольте, я ж не мазохист какой-нибудь. :)

Link to comment
Share on other sites

  • 0

не дописал в почте. Я бы полностью переверстал этот макет. Много там всего ненужного)

Да уж, код - сам по себе, коллекция ненужностей. Но перевёрстывать рабочий вариант?! Увольте, я ж не мазохист какой-нибудь. :)

ну да, дело-то ваше :) Просто я люблю, когда код красивый и в нем все понятно. У вас в макете я долго тыкался, разбираясь, что откуда растет))

а вы, кстати, на ИЕ 6,7 делаете упор? Там от многого можно было избавиться элементарным border-radius.

В старых ИЕ были бы просто квадратные блоки. Зато многих оберток можно было избежать.

Link to comment
Share on other sites

  • 0

У вас в макете я долго тыкался, разбираясь, что откуда растет))

Можно сказать, сей макет рос вместе с моими знаниями о нём. :D

а вы, кстати, на ИЕ 6,7 делаете упор? Там от многого можно было избавиться элементарным border-radius.

В старых ИЕ были бы просто квадратные блоки. Зато многих оберток можно было избежать.

Неа, в ИЕ 6-7 даже как сайт выглядит не проверяю. Да, в общем-то, их сейчас юзают 5-7%, но хотелось бы меньше - так что пускай после не-пойми-куда-попадания обновляются. По-хорошему, надо ещё думать о мифических юзерах, отключающих в браузере картинки, но хотелось бы, чтобы у них появилась мотивация в смене провайдера - так что... :)

Но при этом я ещё недостаточно явно вижу перспективу повального отказа от старых браузеров, чтобы переходить на новый CSS3, а уголков хочется. :rolleyes: (Имею в виду, не таких мастодонтов как 6-й осёл, а предпоследние версии, как 8-й ишак или 10-я Опера.)

Edited by demoncheg
Link to comment
Share on other sites

  • 0

Привет! Может поможете и мне с версткой=) Мучаюсь в этой теме.

Вообще тоже хочется резиновость: шапка (% от окна) - две колонки(% от окна, левая фиксированная по ширине)-подвал(% от окна), прижалый к низу окна при малом контенте. И левая колонка чтобы продолжалась до подвала. Плюс желание обернуть все блоки картинкой-бордюром, причем левые и правые прятать при минимальной ширине окна. Буду признателен :blush:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy