Как реализовать отображение страницы на весь экран с тремя ровными блоками по вертикали?

Question

[Роман Скобцов]

Здравствуйте,имеются три блока,верхний и нижний из которых будут ссылками,но нужно чтоб страница была на всю страницу не зависимо от разрешения экрана.
Как реализовать пропорциональное изменение размера блоков и изображений в фоне?

Answer 1

[Александр]

Рисуете картинки шириной в 2000px
прописываете для них стили
{
width: 100%
max-width: 2000px;
min-width: 100px; //или сколько там минимум
background: url('img/2000pximg.jpg') no-repeat center top;
}

Comments

[Александр]

или если нужно не обрезая картинки то jsfiddle.net/ye436z78

[Nikolay Talanov]

А не судьба использовать цивилизованный background-size: cover; ?

[Александр]

Nikolay Talanov: не судьба.
Если это обычная резиновая верстка, то это как в 1 ом решении,
если нужна масштабируемая картинка то как во втором.
background-size: cover для html5 лендингов, да и бага за ним в связке
background-size: cover + background-attachment: fixed в последнем хроме при ресайзе window

[Nikolay Talanov]

lebonnet: "html5 лендингов" - 2015 год на дворе, вы ведь в курсе? Вы поди все еще вендор-префиксы ручками пишите...

[Александр]

Nikolay Talanov: ну и не забываем про caniuse.com/#search=cover

[Nikolay Talanov]

lebonnet: К сожалению ваша ссылка обманчива, там речь идет о весьма новом свойстве object-fit. У b-s: cover поддержка ие 9+, опера 10+ и так далее. Вот тут можете посмотреть внизу www.css3.info/preview/background-size
Если человеку обязательны ие7/8, то проще фоллбеки сделать, чем не использовать столь полезную фичу :)

[Александр]

Nikolay Talanov: каждый выбирает что ему нужно, я в тегах не вижу html5 или css3

[Nikolay Talanov]

lebonnet: Я позволю врубить себе режим зануды, и напишу, что у вопроса стоит тег "Адаптивный дизайн", что подразумевает использование media queries, что как раз таки является частью css3 :)
https://developer.mozilla.org/en-US/docs/Web/Guide... - "Media queries, added in CSS3"

[Александр]

Nikolay Talanov: а кто говорит что Адаптивный дизайн == CSS media queries? И резиновая верстка != адаптивный дизайн?