Menu
I am trying to get a content panel inside a fixed-position overlay to scroll vertically, but it does not scroll, it is forced into its container.
Can you spot the mistake? fiddle
Only the green bottom should scroll the header 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>
567
You can avoid adding a container to your Bottom element by moving its height to an ::after pseudo-element:
.bottom {
overflow-y: scroll;
height: calc(100% - 80px);
}
.bottom::after {
content: '';
display: block;
height: 10000px;
}
Updated Fiddle
170
You just need to add the maximum height of the container like this
max-height:100%;
and add the 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>
answered May 01 '26 23:05
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With