Jump to content
  • 0

резина - пробую


Rustick
 Share

Question

Ссылка

Пробую резиновую верстку.

Во wrapper взял все кроме подвала. Подвал вынес, для того, чтобы прижать.

Для wrapper проставил:

#wrapper {
min-height: 100%;
}

Почему он тогда не растягивается на всю высоту?

И как в целом моя так скажем "верстка"?

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

body поставьте мин высоту в 100%

Это не правильно.

Почему он тогда не растягивается на всю высоту?

И как в целом моя так скажем "верстка"?

Пока вы не зададите всем элементам высоту 100% до элемента с id #wrapper, у вас #wrapper не будет растягиваться на всю высоту экрана.

При чем вы не должны прерывать цепочку. Например пропустите html, все - не заработает. И не min-height(я имею в виду для элементов до #wrapper), а именно height.

html,body{
height:100%;
}

Edited by cheburek
Link to comment
Share on other sites

  • 0

cheburek, вы допускаете ошибку, не обязательно ставить html высоту если вы ставите ее body, и с min-height:100% тоже будет работать как и с height:100%, min-height можно писать например если у вас есть бг, например в body бг всегда прибито к низу страницы, а если вы укажите просто высоту (не минимальную) в 100% то у вас бг будет не внизу самой страницы, а в низу экрана (это разные вещи)

Edited by Temiks
Link to comment
Share on other sites

  • 0

И как в целом моя так скажем "верстка"?

У вас блок с #content не видит своих потомков.

Так как содержит два плавающих элемента. Обычно это решается с помощью свойство:

overflow:hidden;

Edited by cheburek
  • Like 1
Link to comment
Share on other sites

  • 0

cheburek, вы допускаете ошибку, не обязательно ставить html высоту если вы ставите ее body, и с min-height:100% тоже будет работать как и с height:100%, min-height можно писать например если у вас есть бг, например в body всегда прибито к низу страницы, а если вы укажите просто высоту (не минимальную) в 100% то у вас бг будет не внизу самой страницы, а в низу экрана (это разные вещи)

Давайте разберем ситуацию:

Я считаю, что:

1. height не наследуется, а первоначальное значение имеет - auto. Если не задать html высоту 100%, то и body неоткуда брать значение 100%;

а если присвоить

body {min-height:100%}

, то body просто возмьет высоту своих потомков.

2.

html{
height:100%;}

Это высота окна просмотра, поэтому все должно начинаться с html.

Edited by cheburek
  • Like 2
Link to comment
Share on other sites

  • 0

cheburek, вы допускаете ошибку, не обязательно ставить html высоту если вы ставите ее body, и с min-height:100% тоже будет работать как и с height:100%, min-height можно писать например если у вас есть бг, например в body всегда прибито к низу страницы, а если вы укажите просто высоту (не минимальную) в 100% то у вас бг будет не внизу самой страницы, а в низу экрана (это разные вещи)

Давайте разберем ситуацию:

Я считаю, что:

1. height не наследуется, а первоначальное значение имеет - auto. Если не задать html высоту 100%, то и body неоткуда брать значение 100%;

а если присвоить

body {min-height:100%}

, то body просто возмьет высоту своих потомков.

2.

html{
height:100%;}

Это высота окна просмотра, поэтому все должно начинаться с html.

Проверил , вы правы :)

Странно но у меня в firebug на данной странице вышло только с body растянуть

В общем, я почетно заслужил "-" :)

Пойду ка еще раз прочитаю учебники...

  • Like 1
Link to comment
Share on other sites

  • 0

cheburek, вы допускаете ошибку, не обязательно ставить html высоту если вы ставите ее body, и с min-height:100% тоже будет работать как и с height:100%, min-height можно писать например если у вас есть бг, например в body всегда прибито к низу страницы, а если вы укажите просто высоту (не минимальную) в 100% то у вас бг будет не внизу самой страницы, а в низу экрана (это разные вещи)

Давайте разберем ситуацию:

Я считаю, что:

1. height не наследуется, а первоначальное значение имеет - auto. Если не задать html высоту 100%, то и body неоткуда брать значение 100%;

а если присвоить

body {min-height:100%}

, то body просто возмьет высоту своих потомков.

2.

html{
height:100%;}

Это высота окна просмотра, поэтому все должно начинаться с html.

Проверил , вы правы :)

Странно но у меня в firebug на данной странице вышло только с body растянуть

В общем, я почетно заслужил "-" :)

Пойду ка еще раз прочитаю учебники...

Хотелось бы услышать мнения других, чтоб они тоже поделилсь опытом.

А вы минимум заслужили уважение, а не минус. :)

Link to comment
Share on other sites

  • 0

Я вот тоже согласен с тем, что для прижимания подвала вниз надо растягивать и html и body на 100% свойством height.... я вот всегда для этого делаю html, body {width:100%;height:100%;}.... да и вообще считаю всегда будет правильным если футер прижат к низу при любом количестве контента... ну бывают конечно особенные макеты, но в основном стандартные...

Link to comment
Share on other sites

  • 0

Я вот тоже согласен с тем, что для прижимания подвала вниз надо растягивать и html и body на 100% свойством height.... я вот всегда для этого делаю html, body {width:100%;height:100%;}....

Так вы же и растягиваете html и body на 100% кодом html, body {width:100%;height:100%;}

А вы минимум заслужили уважение, а не минус. :)

Спасибо, и вам также спасибо за то что разъяснили :)

Edited by Temiks
Link to comment
Share on other sites

  • 0

Почему никто не подскажет? потому что нет решения ? Или уже обсуждалось, тогда тыкните, пожалуйста.

Вот это нужно использовать http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/? Или есть более лучшее/менее запутанное решение, или к таблицам лучше вернуться?

Edited by Rossi25
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