2

Проблема заключается в следующем: В проекте react есть layout в этом layout`е есть container, который задает боковые границы контенту. Далее все объекты проекта рендерятся именно в нем.

Таким образом единственный нормальный способ задать фон, это задать его самому layout, т.к. он растянут на всю видимую ширину страницы.

.layout
  position: relative
  height: 100vh
  display: flex
  justify-content: center
  background-image: linear-gradient(to right top, #ffffff, #f8f9ff, #eff3ff, #e4eeff, #d7e9ff, #d7e9ff, #d7e9ff, #d7e9ff, #e4eeff, #eff3ff, #f8f9ff, #ffffff)

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

свойство background-attachment: fixed не работает

единственное что приходит на ум, сделать объект на одном уровне с layout с position fixed. Но как по мне, это не очень красивый способ...

1 ответ 1

1

Единицы измерения vw, vh - Viewport Height, Viewport Width - это процентная величина от общей ширины и высоты области просмотра.

Длина в % рассчитывается относительно ширины текущего контекста (контейнера), а длина vw, vh — относительно общей ширины, высоты области просмотра браузера.

Например, если высота окна браузера равна 900px, то 1vh будет равен 9px!

У Вас для .layout задана высота 100vh, а высота контента не вмещается в эту высоту.

Как вариант, можно использовать все же проценты:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  
  height: 100%;
}

.layout {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to right top, #ffffff, #f8f9ff, #eff3ff, #e4eeff, #d7e9ff, #d7e9ff, #d7e9ff, #d7e9ff, #e4eeff, #eff3ff, #f8f9ff, #ffffff);
}


main {
  height: 5000px;
}
<main>
  <div class="layout">
    
  </div>
</main>

Либо задать минимальную высоту:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.layout {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to right top, #ffffff, #f8f9ff, #eff3ff, #e4eeff, #d7e9ff, #d7e9ff, #d7e9ff, #d7e9ff, #e4eeff, #eff3ff, #f8f9ff, #ffffff);
}


.inner {
  height: 5000px;
}
<main>
  <div class="layout">
    <div class="inner">
      
    </div>
  </div>
</main>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.