CODEWITHSUNDEEP
javascripthtmlcssstyling
Lililashka
Lililashka

Reputation: 51

How to make CSS height 100% scrollable?

I want to make the two-tone background. 50% of left side is in the main background color and 50% right side in another color (say pink). I could accomplish that but now facing another problem. When the mouse cursor is on the pink background color, the page becomes unscrollable. How to fix this and make it scrollable?

html code 

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>

Upvotes: 0

Views: 1097

Answers (3)

Awais
Awais

Reputation: 4902

Why not using background gradient with single div without positioning like below

html,
body {
  margin: 0;
  overflow: scroll;
  height: 100%;
   background-image: linear-gradient(to right, #f5f5f5 50% , pink 50%);
}
<body>
  <div id="background"></div>
</body>

Upvotes: 1

Nipun Jain
Nipun Jain

Reputation: 1014

You dont't have to use another div for two-tone background you can acheive by just this:

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 */
}

Have a look at a working pen here If you want to follow the approach you are doing then yes you can give min-height: 100%; to html.

Upvotes: 1

Lililashka
Lililashka

Reputation: 51

I've fixed this by changing height: 100% in html, body to 

min-height: 100%;

Upvotes: 1

Related Questions