Как сделать так чтобы background-color был на весь экран браузера?

Question

[php7788]

Здравствуйте, есть header, div с классом mainblock и footer.

Мне нужно сделать так чтобы bg-color первого блока был на всю ширину и высоту окна браузера. Я попытался сделать это с помощью min-height: 100vh;

Вышло вот так:

К хедеру не применяется bg-color + не видно контента этого основного блока. А если пытаюсь поставить pos:absolute с top 0 и left 0. То получается еще хуже, футер поднимается наверх. Какое есть решение? Это возможно решить? Или только картинку можно поставить правильно

Comments

[php7788]

нужно сделать так чтобы если был бы второй блок, то появлялась прокрутка а затем второй блок. Я хочу чтобы первый блок был на весь экран и нечего ему не мешало. Уф надеюсь я понятно объяснил. Фуллскрин надо сделать только не с картинкой а с bg-color

[Алексей Ярков]

php7788,

Уф надеюсь я понятно объяснил

Не надейся, а просто сделай пример в песочнице, чтобы смотреть на код, а не на попытки объяснить его.

[php7788]

Алексей Ярков, https://codepen.io/Atavullaev/pen/PobeXVV надеюсь вы сможете помочь, там сложно.

[Максим]

php7788,

.header {
  z-index: 2;
  background: #9BC0DB;
}

[php7788]

I love SVG, фон не как фуллскрин там есть прокрутка и если прокрутить видно что край фона выходит.

[php7788]

I love SVG, еще раз посмотрите код, я footer убрал. Но фон не на весь экран браузера. Там есть прокрутка, а мне нужно как height: 100vh;

[php7788]

I love SVG, и еще это какой то костыль заново назначать еще и хедеру бэкграунд

[Максим]

php7788, я просто фон не убрал - у другого блока - если фон нужен в шапке то ему и назначьте и так же адtкватные width и height

[php7788]

I love SVG, мне нужен на все окно браузера фон а не только на хедер

[php7788]

I love SVG, если нету решения, может тогда скачать фон сплошной как jpg и все?

[Максим]

php7788, тогда ....сделать фиксированный блок с этим фоном ...

[php7788]

I love SVG, и нечего не получится XD

[php7788]

I love SVG, мне нужно как здесь https://www.w3schools.com/howto/tryhow_css_fullpag... , только чтобы вместо картинки был background-color и хедер сверху был внутри этого background-color

[Максим]

php7788, макет покажи...а то я не понимаю

[Ankhena]

Я что-то не всё поняла.
Почему вы не можете задать фон для body или обертке нужных вам блоков?

[php7788]

I love SVG, https://camouf.ru/designes/ready-psd-layouts-for-s... вот прямо как в этом макете мне нужно сделать. Я не понимаю как задать такой background первому блоку

[php7788]

Ankhena, сверху написал ссылку

[Максим]

php7788, опять эта cuda ....блин здесь его уже 300 раз делали ....вопрос дубликат .... Короче делай секции 100vh и назначай фон ....вопрос закрыть

[php7788]

I love SVG, вот именно у меня не получилось( я же в своей верстке так сделал вы сами видели не получилось...

[Максим]

php7788, в личке есть почта...пиши туда ...скачай анидэск _ буду делать у тебя на компе ...посмотришь как

[php7788]

I love SVG, это так сложно чтобы показать? Мне же целый макет не надо верстать

[Максим]

php7788, https://codepen.io/naomi27/pen/wWyqPa?editors=1010 вот так в общем

[Максим]

php7788, https://codepen.io/gintarek/pen/mXORNv вот тоже

[php7788]

I love SVG, это вы так быстро сверстали?

[Максим]

php7788, у меня в pen тоже есть - я тоже его делал - это чужие работы - просто cuda меня достала уже - не надо макет буквально воспринимать - в общем смотри там и учись - так не 100vh

[php7788]

I love SVG, мне не нужна фиксированная высота первого блока, мне нужно 100vh чтобы фон растягивался если растягивать окно браузера

[Максим]

php7788, там всё просто - там нету высоты - там высота по содержимому + padding

[php7788]

I love SVG, аа все понял. Как я сам до этого не догадался. Аж бесит. Я думал только у меня такой макет, а можно где нибудь найти макет который еще никто не верстал?

[php7788]

I love SVG, Просто еще один макет на свалку, потому что я уже просмотрел код. И не сверстал сам. Нужен макет который никто не верстал

[Максим]

php7788, неее..по любому новички ищут в сети - так как и все ищут и скачивают - верстают и сюда приходят мозг выносить - я обычно спрашиваю макет - и оказывается всё просто

[Максим]

php7788, макеты которые ни кто не верстал заказывают - behance или adobe creative где то там

[Ankhena]

php7788, в макете нет никаких 100vh, там просто секции одна за другой и у каждой фон.

Answer 1

[kryamk]

1. Сделать первую секцию 100vh, в неё бахнуть шапку, задать секции цвет
2. Шапке высоту скажем 50px, первой секции calc(100vh - 50px). Обоим задать нужный цвет
3. Добавить дополнительную секцию с цветом, абсолютно спозиционировать, высоту 100vh, раскидать z-index, а высоту шапки и первой секции как во втором пункте
4. Задать цвет боди, а шапку и первую секцию как во втором пункте
5. Плюнуть на всё и пойти бухать
6. Добавить дополнительный псевдоэлемент с цветом вместо секции как в третьем пункте
7. Задать отдельную фиксированную высоту и прописать в медиазапросах для каждого пикселя
8. Сказать дизайнеру чтобы всё переделывал, а то понапридумывают всякого
9. Шапку фиксированную сделать, а секции 100vh

Comments

[php7788]

Насчёт 5 полностью согласен, без этого пункта голова не хочет думать