Как правильно сделать резиновый сайт (не работает max-width )?

Question

[Антон Романов]

Помогите пжлст сделать правильно резиновый сайт. У меня проблемы с шириной и высотой блоков. Когда прописываю max-width к конкретному блоку - это свойство почему-то не работает. Max-width работает только, если прописываю его к body в общем. Хочется сделать сайт, который будет тянутся при разных разрешениях экрана.

Код можно посмотреть на codepen.

Столкнулся со следующими вопросами:

1) Как правильно прописывать ширину max-width: для body в целом или для каждого блока отдельно?
2) Как правильно делать высоту блока? Фиксировать в px или делать в %. Прописываю height: 100%, но блоки получаются слишком низкие... Как сделать так, чтобы каждый блок был по высоте на один экран?
3) Как делать правильно расстояние между блоками? Делаю через margin-top или bottom в пикселях. Например, margin-bottom: 200px. Правильно это вообще? Стоит ли фиксировать отступ в пикселях? Если нет, то как правильно будет?
4) И еще момент по отступам во втором блоке. Второй блок сделан рамкой с отступами по бокам. Как сделать так, чтобы при уменьшении экрана, отступы оставались? При 1000px смотрится правильно, но начинаю уменьшать и отступы пропадают. Сейчас блок сделан с width: 100%; и прописанным max-width к body.

Помогите пжлст. Хочется разобраться, как правильно делать ширину и высоту блоков, чтобы они тянулись. Перепробовал разные варианты, но так и не нашел правильного решения :(

Answer 1

[Станислав]

1. Работает. Обычно, если требуется указать max-width для всего сайта, код оборачивает в div с классом container и добавляют ему max-width.
codepen
2. Используйте vh, vw, vmin, vmax
3 и 4. https://medium.com/@js_tut/flexbox-the-animated-tu...

Comments

[Антон Романов]

Спасибо! С Наступающим!

1. Разобрался с шириной.

2. С высотой остался вопрос. Сделал
.header {height: 100vh;}

и для центровки контента прописал

.main-container {  
        display: flex;
	flex-direction: column;
	justify-content: center; 
}

В итоге блок растянулся по высоте, но контент в нем не центруется по вертикали. При этом я убрал фиксированный маргин-топ у дива, чтобы не привязываться к пикселям. Что надо сделать, чтобы контент был по центру экрана по вертикали при любом разрешении?

3. По поводу флекс - спасибо. Полезно. Хотел уточнить - как делать расстояние между блоками сайта (то есть между экранами). В моем примере между header и how_works. Как эти расстояние задавать? Делать фиксированный маргин сверху: 200 пх (например) у второго блока (how_works), если я хочу увеличить расстояние? Или это по другому лучше делать?

Обновил код

[yarovikov]

Антон Романов,

для flex контейнера высота 100% должна быть. И в нем уже

align-items: center или justify-content: center;

[Антон Романов]

Сделал, но изображение не центрируется, а увеличивается в размере на всю высоту. Как быть тогда? Правильно, вообще, я задал изображение фоном или надо было в html через тег img делать это изображение?

Сейчас код:

.main-container {
       box-sizing: border-box;
       background-image: url("https://startly.web3templates.com/demo/software/images/screen2.jpg");
	background-size: contain;			
	background-repeat: no-repeat;
	background-position: right center;
  
        height: 100%;
        display: flex;
	flex-direction: column;
	justify-content: center;
}

Answer 2

[Andrey Kubishenko]

1.Здравствуйте,что касается 1 вопроса, задавать можно и к body и к отдельному элементу,зависит от цели, если хочешь чтобы сайт перестал уменьшаться при достижении конкретного размера пиши для body,если такое действие требуется для отдельного элемента то задавайте для него.
2. Это резиновый дизайн и для него требуется задавать всё в процентах,задавайте height:100% для контейнера в котором находиться элемент,если это и есть контейнер содержащий ещё контейнеры,то задав для него height:100%,он и так будет на весь экран,так-как родитель для него body.
3. Задавайте отступы в процентах или в других относительных единицах ,верстка же резиновая.
4. Задайте для flex-контейнеров :

flex-wrap:wrap;
flex-direction:row;
judtify-content:space-between;

>
Вроде все,кстати неплохо было-бы вам прочитать про такие единицы как: vh, vw, vmin, vmax

Comments

[Дмитрий Алп]

Но ведь если контейнер пустой, то height 100% ничего не даст, пока не наполнить контейнер содержимым? И уже тогда процентам будет от чего отталкиваться? Разве нет?