CODEWITHSUNDEEP
htmlcss
Shlomi Schwartz
Shlomi Schwartz

Reputation: 8903

CSS max-height based on scroll position

Is there a CSS only trick to make this happen:
An element is placed in position absolute x,y on the screen. The document has a vertical scroll depending on its content. Can the height be controlled based on the available visible viewport area?

Exampe 1:
example 1

Exampe 2:
enter image description here

HTML: 

<div id="dialog">
Change my height with no JS :)
</div>
<div id="content">
... content
</div>

JS Fiddle: https://jsfiddle.net/8dj4xz2q/

Upvotes: 1

Views: 1130

Answers (1)

Sumit Patel
Sumit Patel

Reputation: 4638

yes it is you can do this using VH property and also using css calc to calculate right height.

check out the snippet.

#content{
  font-size:100px;
  color:#CCC;
}

#dialog {
  position:absolute;
  top:100px;
  left:100px;
  border: solid 1px red;
  height:calc(100vh - 130px);
  overflow-y:scroll;
  width:200px
}
<div id="dialog">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Upvotes: 1

Related Questions