Romulus Romulus - 25 days ago 11
CSS Question

CSS: Making "overflowable" segments on webpage without absolute position

I have a header and content on my page. The content should be scrollable within its own section so that user can scroll through all the text within content without losing sight of the header.

This is doable with the code:

position: absolute;
overflow-y:scroll;


But, this results in the content overlapping with the header.
So, I define
top:80px;
but this only works for certain screen sizes. If you shrink the window the header starts to overlap with the content again.

I want the content to start just under the header, but also have the attributes of being scrollable without losing view of the header.

Here is a fiddle I have the current setup:
https://jsfiddle.net/14zckot2/6/

EDIT 1

Adding:

max-height: 100vh;
overflow-y:scroll;


instead of

position: absolute;
overflow-y:scroll;


works except the overflow should start at the bottom of the window, but instead it starts below of the bottom of the window (the amount that it is below the bottom of the windows is equal to the height of the header).

How do I set the
max-height
to be equal the height of the window - the height if the header, or somewhat equivalently to be the distance between the start of the content and the end of the window?

Answer

You must specify some max height to the content and remove the position:absolute. By this it wont overlap the header.

#header {
  font-size: 30px;
}
#content {
  text-align: center;
  padding: 20px;
  color: #000;
  clear: both;
  bottom: 0px;
  top: 80px;
  left: 0%;
  right: 21%;
  overflow-y: scroll;
  overflow-x: scroll;
  max-height: 80px;
}
<div id=header>
  This is my header and its size sometimes fits and sometimes doesnt depending on screen width
</div>
<div id=content>
  This is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my
  paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraphThis is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis
  is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraph

</div>