Clever Geek Handbook

CSS overlay with scrolling content

I'm trying to get a content pane inside a fixed position overlay for vertical scrolling, but it doesn't scroll, it gets inserted into its container.

Can you spot the error? fiddle

Only the green bottom should scroll, the title should stay where it is.

<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }
    </style>
</head>
<body style="background-color: #502074;">
    <div style="position: fixed; width:100%; height: 100%;">
        <div style="height: 80px; width: 100%; background-color: yellow;">Top</div>
        <div style="height: 10000px; width: 100%; background-color: green; overflow: scroll;">Bottom</div>
    </div>

</body>
</html>
+3


source to share


3 answers


You can choose not to add a container to your Bottom element by moving its height to the pseudo-element ::after

:

.bottom {
  overflow-y: scroll;
  height: calc(100% - 80px);
}

.bottom::after {
  content: '';
  display: block;
  height: 10000px;
}


Updated script

+2


source


Thanks @driconmax, this was almost what I needed, now it succeeded:

<body style="background-color: #502074;">
    <div style="position: fixed; width:100%; height: 100%; ">
        <div style="height: 80px; width: 100%; background-color: yellow;">Top</div>
        <div style="height:calc(100% - 80px);overflow: scroll;">
          <div style="height: 10000px;  width: 100%; background-color: green; ">Bottom</div>
        </div>
    </div>

</body>


Updated violin

+2


source


You just need to add the max height of the container like this

max-height:100%;

and add a scroll property

overflow-y:auto;

And your code will look like this

<style>
    * {
        box-sizing: border-box;
    }
</style>

<body style="background-color: #502074;">
    <div style="position: fixed; width:100%; height: 100%; max-height:100%; overflow-y:auto;">
        <div style="height: 80px; width: 100%; background-color: yellow;">Top</div>
        <div style="height: 10000px; width: 100%; background-color: green; overflow: scroll;">Bottom</div>
    </div>

</body>
</html>
+1


source






More articles:


All Articles