Как сделать CSS высота на 100% прокручиваемой? - PullRequest
Новая
       1

Как сделать CSS высота на 100% прокручиваемой?

0 голосов
/ 18 февраля 2020

Я хочу сделать двухцветный фон. 50% левой стороны имеют основной цвет фона, а 50% правой стороны - другой цвет (скажем, розовый). Я мог бы сделать это, но теперь столкнулся с другой проблемой. Когда курсор мыши находится на розовом цвете фона, страница становится прокручиваемой. Как это исправить и сделать прокруткой?

html код 

html,
body {
  margin: 0;
  overflow: scroll;
  height: 100%;
  background-color: #f5f5f5;
}

#background {
  position: fixed;
  top: 0px;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: pink;
  z-index: 0;
}
<body>
  <div id="background"></div>
</body>

Ответы [ 3 ]

1 голос
/ 18 февраля 2020

Почему бы не использовать background gradient с одним div без позиционирования, как показано ниже 

html,
body {
  margin: 0;
  overflow: scroll;
  height: 100%;
   background-image: linear-gradient(to right, #f5f5f5 50% , pink 50%);
}
<body>
  <div id="background"></div>
</body>
1 голос
/ 18 февраля 2020

Я исправил это, изменив высоту: 100% в html, тело в 

min-height: 100%;
0 голосов
/ 18 февраля 2020

Вам не нужно использовать другой div для двухцветного фона, который вы можете получить просто так: 

html,
body {
  margin: 0;
  overflow: auto;
  min-height: 100%;
  background: linear-gradient(to left, pink 0%,pink 50%,#000000 50%,white 50%,white 100%); /* W3C */
}

Посмотрите на рабочую ручку здесь Если вы хотите следовать подходу, который вы делаете, тогда да, вы можете дать min-height: 100%; html.

...