Как позиционировать и адаптировать без пустого пространства?

Question

[alekamisleforma]

Здравствуйте! Двухколоночный сайт, слева контент, справа сайдбар. Нужно, чтобы при уменьшении экрана блок с поиском из боковой колонки был первым, за ним шел блок news, sidebar-content, а потом articles. Как это можно сделать? Неважно по каким родителям распихивать эти блоки.

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

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

Answer 1

[Арсений Матыцин]

Можно без grid. На десктопе ты можешь абсолютно спозиционировать поиск и под ним sidebar. Я уверен, что ты точно знаешь высоту поиска (или сейчас поймешь, что знаешь). И уж точно ширину.

Ширину news и article можно регулировать на десктопе как угодно, хоть калькулировать на css, хоть margin-right в размер сайдбара задавать. Ну и рекомендую все же пользовать принцип mobile-first. Т.е. сперва описать правый layout, а потом дополнить его танцем с бубном, как я предложил.

Еще ты можешь воспользоваться возможностями JS по манипуляции DOM, т.е. банально менять структуру при разном разрешении. Или вообще пойти дальше и заюзать какой фреймворк, но это не всегда уместно.

Comments

[alekamisleforma]

Благодарю за ответ! Сделал через абсолютное позиционирование search и sidebar, работает как нужно. Но.. это вообще нормально так верстать? Костыль. Может быть есть какое-нибудь более лаконичное, правильное решение?

<div class="search">search</div>
<div class="news">news</div>
<aside class="sidebar">sidebar</aside>
<main class="content">content</main>

.search{
	width: 25%;
	height: 50px;
	background: red;
	position: absolute;
	right: 0;
	top: 0;
}

.sidebar{
	width: 25%;
	height: 750px;
	background: green;
	position: absolute;
	right: 0;
	top: 50px;
}

.news{
	width: 75%;
	height: 350px;
	background: blue;
}

.content{
	width: 75%;
	height: 450px;
	background: black;
}

@media (max-width: 800px) {
	.search{
		position: static;
		width: 75%;
		margin: 0 auto;
	}

	.sidebar{
		position: static;
		width: 100%;
	}

	.news{
		width: 100%;
	}

	.content{
		width: 100%;
	}
}

[Арсений Матыцин]

alekamisleforma, да, это абсолютно нормально, если ты не выстрелил себе в ногу, набедокурив с поддержкой. Часто такое бывает, но никак не относится к методе.

По крайней мере именно к твоему макету такой вариант исполнения подходит.

А вот на счет стилей я бы на твоем месте написал наоборот, как я указал выше по принципу mobile first. То, что у тебя идет в начале обернуть в @media (min-width: 800px) {. А то, что после оставить без медиазапроса.

Можно пойти дальше и написать, как четкие поцоны: чтобы конфликтные стили не пересекались вообще, т.е. например:

.search{
  color: red;
  ....
}
@media (max-width: 799.99px) {
  .search{
    width: 100%;
    ....
  }
@media (min-width: 800px) {
  .search{
    position: absolute;
    right: 0;
    width: 75%;
    ....
  }

Конфликтные стили, это когда оба описывают один и тот же элемент, но один из них не работает. Например по специфичности. Визуально это хорошо видно в панели разработчика, там неработающие стили перечеркнуты.

[Арсений Матыцин]

alekamisleforma, кстати, если под «Но.. это вообще нормально так верстать?» ты имеешь в виду, не стоило ли сделать дублирование контента и показывать один или другой в зависимости от разрешения — иной раз в очень частных случаях, например, когда ты осуществляешь прогрессивное улучшение верстки и дублируешь контент, который зависит от JS. Т.е. если ты можешь безболезненно обойтись без дублирование — обойдись.

[alekamisleforma]

Арсений Матыцин, нет, ну дублирование контента это еще больший костыль, на мой взгляд)) Меня смущает абсолютное позиционирование. Но в этом случае без него никак не обойтись, видимо.

Большое спасибо за помощь и расширенные ответы!