при изменении размера окна нижний <div> наезжает на верхний<div>

[CyberKatana]

Всем привет! Подскажите новичку. Длжно быть так: Два блока один привязан к верху, другой к низу экрана, при увеличении окна расстояние между ними увеличивается(так щас и есть), а при уменьшении до определенного размера должен появится скрол. Но min-height не помогает, точнее нижний блок так и остается внизу при прокручивании скрола перекрывает верхний блок. Я так понимаю что я неправильно привязал нижний блок.

http://jsfiddle.net/avRPt/2/

[Mister-N]

все дела в position: fixed; задания этого правила в вашем случае навсегда привязывает блок .button к нижней части браузера и вытаскивает его из нормального потока т.е. теперь не один элемент не будет учитывать его даже если если вы укажите min-height: ....; он все равно будет оставаться снизу окна браузера почитайте http://htmlbook.ru/css/position.

если вы хотите что бы блок оставался снизу экрана только до того момента пока суммарное значение высот обоих блоков (button, text) не превышало окно браузера воспользуйтесь javascript другого решения я не вижу.

Edited October 31, 2013 by Mister-N

[CyberKatana]

все дела в position: fixed; задания этого правила в вашем случае навсегда привязывает блок .button к нижней части браузера и вытаскивает его из нормального потока т.е. теперь не один элемент не будет учитывать его даже если если вы укажите min-height: ....; он все равно будет оставаться снизу окна браузера почитайте http://htmlbook.ru/css/position.

если вы хотите что бы блок оставался снизу экрана только до того момента пока суммарное значение высот обоих блоков (button, text) не превышало окно браузера воспользуйтесь javascript другого решения я не вижу.

спасибо большое.

[Mister-N]

но если вы хотите что бы блок .button оставался просто внизу .wrapper а не внизу окна браузера тогда задайте position: absolute; у .button а у .text margin-bottom на высоту блока .button

Edited October 31, 2013 by Mister-N

[CyberKatana]

но если вы хотите что бы блок .button оставался просто внизу .wrapper а не внизу окна браузера тогда задайте position: absolute; у .button а у .text margin-bottom на высоту блока .button

идеальная картинка выглядит так, .wrapper вытянут на весь экран браузера, а .button привязан к низу .wrapper, соответственно .text к верху. Когда экран растягивается по вертикали .wrapper растягивается вместе с ним, .button и .text остаются вверху и внизу а расстояние между ними увеличивается.