background: linear-gradient при появлении скролл бара градиент начинает повторяться

Question

Код:

body {
     background: linear-gradient(to top, #4B0082, #DC143C);
}

Так же у меня есть блок, и если ширина экрана меньше 600px, то он принимает размеры: width: 700px и height: 900px. За счет этого появляется скролл бар для прокрутки вниз. Это нормально, но если прокрутить вниз, то градиент повторяется и получается не красивый фон, вот пример:Обычный, нормальный фон-градиент

Как можно исправить это?

/* ___ Обнуления ___ */


/* Указываем box sizing */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* Убираем внутренние отступы */

ul[class],
ol[class] {
  padding: 0;
}


/* Убираем внешние отступы */

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

li {
  list-style-type: none;
}

ul {
  padding-left: 0;
}

a {
  text-decoration: none;
}


/* Выставляем основные настройки по-умолчанию для body */

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}


/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */

a:not([class]) {
  text-decoration-skip-ink: auto;
}


/* Упрощаем работу с изображениями */

img {
  max-width: 100%;
  display: block;
}


/* Указываем понятную периодичность в потоке данных у article*/

article>*+* {
  margin-top: 1em;
}


/* Наследуем шрифты для инпутов и кнопок */

input,
button,
textarea,
select {
  font: inherit;
}


/* Загружаем шрифты */

@font-face {
  font-family: ***;
  src: url(../fonts/***);
}


/*_____________________________________________________________________________________*/

button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

input {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}


/*_____________________________________________________________________________________*/

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to top, #4B0082, #DC143C);
}


/*_____________________________________________________________________________________*/

body {
  background: linear-gradient(to top, #4B0082, #DC143C);
  background-repeat: round;
  color: #fff;
  padding-top: 50px;
}


/*_____________________________________________________________________________________*/

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.logo-img {
  margin-left: 10px;
  text-align: center;
  font-family: 'Black Ops One', cursive;
  font-size: 36px;
  color: #FFF;
  padding-right: 10px;
  line-height: 50px;
}

.logo-img:hover {
  color: #000;
  text-decoration: underline;
}

.nav {
  width: 100%;
  height: 50px;
}

.nav-position {
  float: right;
}

.nav-position a {
  text-align: center;
  float: left;
  margin-left: 2px;
  width: 100px;
  height: 50px;
}

.nav-position a div {
  color: #FFF;
  height: 100%;
  line-height: 50px;
}

.nav-position a div:hover {
  color: #000;
  background-color: rgba(255, 255, 255, 0.45);
}

.true:hover {
  border-bottom: 1px solid #FFF;
}

.false {}


/*_____________________________________________________________________________________*/

.wrapper {
  position: absolute;
  top: 55px;
  bottom: 5px;
  width: 100%;
}

.container {
  width: 870px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.select-dialog {
  width: 275px;
  height: 100%;
  margin-right: 3px;
  overflow-y: auto;
}

.select-dialog::-webkit-scrollbar {
  width: 0px;
}

.block-enter-id {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}

.help-write-id {
  text-align: center;
  padding-top: 7px;
  margin-bottom: 2px;
}

.workspace-write-id {
  margin-top: 2px;
  display: flex;
  justify-content: center;
}

#enter-id {
  width: 225px;
  height: 30px;
  outline: none;
  border: 1px solid #FFF;
  border-right: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0);
}

#add-friend {
  width: 35px;
  height: 30px;
  outline: none;
  border: 1px solid #FFF;
  border-left: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  cursor: pointer;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0);
}

.list-dialogs {
  width: 100%;
}

.list-dialogs li {
  width: 100%;
  height: 65px;
  margin-top: 2px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}

.display {
  width: 575px;
  height: 100%;
  margin-left: 3px;
}

.information {
  position: absolute;
  width: 575px;
  top: 0;
  height: 80px;
  border-bottom: 1px solid #FFF;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}

.information img {
  padding: 3px;
  width: 80px;
  height: 80px;
  object-fit: cover;
  float: left;
  border-radius: 50%;
}

#name-surname {
  margin-left: 5px;
  float: left;
}

#online {
  margin-left: 4px;
}

.messages {
  position: absolute;
  width: 575px;
  top: 80px;
  bottom: 125px;
  padding: 5px 7px 15px 7px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.messages::-webkit-scrollbar {
  width: 2px;
}

.messages::-webkit-scrollbar-thumb {
  background: #FF0;
}

.message {
  width: 100%;
  margin-top: 8px;
  display: table;
}

.message img {
  max-width: 350px;
  border-radius: 10px;
}

.me {
  float: right;
  max-width: 70%;
  padding: 10px 15px 10px 15px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.2);
}

.to-me {
  float: left;
  max-width: 70%;
  padding: 10px 15px 10px 15px;
  min-width: 20px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.07);
}

.workspace {
  position: absolute;
  width: 575px;
  bottom: 0;
  height: 125px;
  padding: 10px;
  border-top: 1px solid #FFF;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}

#write-message {
  width: 510px;
  height: 100%;
  float: left;
  resize: none;
  outline: none;
  border: 1px solid #FFF;
  border-right: 0;
  color: #FFF;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background-color: rgba(0, 0, 0, 0.2);
}

#smile {
  width: 45px;
  height: 50%;
  outline: none;
  border: 1px solid #FFF;
  cursor: pointer;
  color: #FFF;
  border-top-right-radius: 6px;
  background-color: rgba(0, 0, 0, 0.2);
}

#enter-message {
  width: 45px;
  height: 50%;
  outline: none;
  border: 1px solid #FFF;
  border-top: 0;
  cursor: pointer;
  color: #FFF;
  border-bottom-right-radius: 6px;
  background-color: rgba(0, 0, 0, 0.2);
}


/*_____________________________________________________________________________________*/

@media only screen and (max-width: 600px) {
  header {
    height: 20px;
  }
}

@media only screen and (max-width: 600px) {
  .nav-position a {
    width: 50px;
    font-size: 8px;
    height: 20px;
  }
}

@media only screen and (max-width: 600px) {
  .nav-position a div {
    line-height: 20px;
  }
}

@media only screen and (max-width: 600px) {
  .logo-img {
    font-size: 13.5px;
    line-height: 20px;
  }
}

@media only screen and (max-width: 600px) {
  body {
    padding-top: 20px;
  }
}

@media only screen and (max-width: 600px) {
  .wrapper {
    top: 24px;
  }
}

@media only screen and (max-width: 1000px) {
  .wrapper {
    height: 800px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/messages.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300&display=swap" rel="stylesheet">
  <title>VKT Messages</title>
</head>

<body>



  <header>
    <a href="../index.html">
      <div class="logo-img">VKT</div>
    </a>
    <div class="nav">
      <div class="nav-position">
        <a href="profile.html" class="true" id="profile">
          <div>Профиль</div>
        </a>
        <a href="messages.html" class="true" id="messages">
          <div>Сообщения</div>
        </a>
        <a href="friends.html" class="true" id="friends">
          <div>Друзья</div>
        </a>
        <a href="" class="true" id="settings">
          <div>Настройки</div>
        </a>
        <a href="" class="true" id="about-site">
          <div>О сайте</div>
        </a>
      </div>
    </div>
  </header>


  <div class="wrapper">
    <div class="container">

      <div class="select-dialog">

        <div class="block-enter-id">
          <p class="help-write-id">Введите ID профиля:</p>
          <div class="workspace-write-id"><input id="enter-id" type="text" placeholder=" Введите ID"><button id="add-friend">❮</button></div>
        </div>

        <div class="list-dialogs">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </div>

      </div>

      <div class="display">

        <div class="information">
          <img src="https://sun9-18.userapi.com/impg/Typ2eaBUcBrqIEU05u0h5OW-iwByd-um29mz1g/oqXYy9NT6x0.jpg?size=648x648&quality=96&sign=0a83db4e4d4719a891873d83c6af5ba8&type=album">
          <p id="name-surname">Тест Тестов</p><span id="online">(Онлайн)</span>
        </div>

        <div class="messages">
          <div class="message">
            <p class="me">Teeeeeeeeest</p>
          </div>
          <div class="message">
            <p class="to-me">Teeest?????</p>
          </div>
          <div class="message">
            <p class="to-me">Дааа!!!! Ураа</p>
          </div>
          <div class="message">
            <p class="me">Даа! Это теееест!))</p>
          </div>
          <div class="message">
            <p class="me">Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы-Тест-Сообщения-Без-Пробела-Ы</p>
          </div>
          <div class="message">
            <p class="me">Юхууу))</p>
          </div>
          <div class="message">
            <p class="to-me">Молодечииик)))))</p>
          </div>
          <div class="message">
            <p class="me">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio, voluptatibus quo, hic fuga consequatur sit doloremque molestias. Deserunt quae quaerat, labore vero consectetur. Ipsam rem, quidem totam, dolore molestias commodi.</p>
          </div>
          <div class="message">
            <p class="to-me">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, non! Architecto, consequatur temporibus! Voluptates iste ipsam placeat impedit cum, hic quas omnis nihil neque, aspernatur doloremque, voluptate, debitis provident saepe.</p>
          </div>
          <div class="message">
            <p class="to-me">Ха, теперь самое слоэное позади!)</p>
          </div>
          <div class="message">
            <p class="me">Ыыыыыыыы))) Да..) Пасибо =)</p>
          </div>
          <div class="message">
            <p class="to-me">Lorem ipsum dolor sit amet consectetur adipisicing, elit. Eos esse accusamus rem dignissimos praesentium quidem quo, quam est aperiam? Voluptatum, temporibus. Distinctio sequi modi beatae eaque vero, adipisci reiciendis repudiandae?</p>
          </div>
        </div>

        <div class="workspace">
          <textarea id="write-message" placeholder=" Введите сообщение"></textarea>
          <button id="smile">☺</button>
          <button id="enter-message">➤</button>
        </div>

      </div>

    </div>
  </div>


</body>

</html>

Answer 1

Попробуйте сделать так:

html {
    height: auto;      
    min-height: 100%; 
}

БЛОГ НА HUSL

background: linear-gradient при появлении скролл бара градиент начинает повторяться

Ответы (1 шт):