sohail.hussain.dyn sohail.hussain.dyn - 6 months ago 10
CSS Question

position fixed inner div not scrolling

I have this html and css. The problem is I want to scroll inner div but position fixed should not be removed.



body {
position: fixed;
}
div {
overflow-y: scroll;
height:100%;
}

<body>
<div>
Sohail Hussain
<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS
<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/>
FDSFSDFDSFS

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
ABCDEFGHI
</div>
</body>




T J T J
Answer

For % height to work the parent element needs a height. In your case <html> and <body> do not have a height.

and it's not a good practice to change the positioning of <body>. Better wrap your content in a <div> and adjust it's positioning instead.

html,
body {
  height: 100%;
}
body {
  position: fixed;
}
div {
  overflow-y: scroll;
  height: 100%;
}
<div>
  Sohail Hussain
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>FDSFSDFDSFS
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>FDSFSDFDSFS
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>FDSFSDFDSFS
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>FDSFSDFDSFS
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>FDSFSDFDSFS
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>FDSFSDFDSFS

  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>ABCDEFGHI
</div>