Как заставить всегда умещать контент на страницу (по вертикали)?

Question

[Александр Панков]

Здравствуйте, не подскажите на основе чего (как реализовать) адаптивность по вертикали

Те имеем примерно такую структура страницы:


Те на странице высотой до 768px должны быть 4 квадрата НО
и на странице высотой в 1080px также 4 квадрата, просто они должны быть больше....

Скажите пожалуйста как построить такую верстку?

Answer 1

[Константин Довнар]

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

Answer 2

[Mikita Lisavets]

Можно задать высоту квадратов в процентах (у родителя должна быть задана высота) и вставить img c квадратной прозрачной .png картинкой, тогда, по идеи, будут пропорционально уменьшаться и увеличиваться квадраты

img {
  display: block;
  height: 100%;
  width: auto;
}

Answer 3

[Александр Панков]

да у меня там на самом деле 2 слайдер (сверху снизу) и они должны быть большими на большом экране и маленькими на маленьком, вообщем в любом случае умещаться на один экран

Comments

[grepfreecd grepfreecd]

Только не говорите, что изображения в слайдерах в одном экземпляре и вы не собираетесь делать под каждое разрешение свое изображение ? Заранее предвижу проблему, поэтому: picturefill в помощь.

Answer 4

[Игорь Воротнёв]

flexbox

https://scotch.io/demos/visual-guide-to-css3-flexb...

Answer 5

[Макс Куликов]

header{
position:fixed;
width:100%;
}

content{
min-height:768px;
width:100%;
height:100%;
overflow:hidden;
}