overlay with scrollable background content
Question
I am working on an angular project and I want to create a overlay. This piece of code is just simple HTML/css placed in a component.
The content must still be scrollable.
The issue is that the scrollbar is not attached to the body but to a child element.
HTML
<body>
<header>header</header>
<content>
<div class="lorum">
some data
</div>
<div class="overlay"></div>
</content>
</body>
CSS
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 65px;
background-color: crimson;
display:block;
}
content {
height: calc(100vh - 65px);
overflow-y: auto;
width: 100%;
background-color: salmon;
display: block;
margin: 0 auto;
postion: relative;
}
.lorum {
width: 60%;
background-color: green;
margin: 0 auto;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.3;
}
Link to codepen:
https://codepen.io/Babulaas/pen/qeavqo
The most examples are based on a scrollbar that is attached to a body element.
1 answers
solution1
0 2019-07-26 13:43:49
You must remove the overflow-y: scroll; from content and change position: absolute; to position: fixed; on the .overlay class.
This happens because overflow-y: scroll; specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.
We changed position: absolute; to position: fixed; because than the overlay stays fixed on the screen, always filling the entire area.
For the header to stay fixed and don't scroll, add position: fixed on header class.
Because the header is fixed, we added padding-top: 65px; into .lorum (header is 65px tall).
To fill the entire screen / page with salmon color, add background-color: salmon; on the body .
Check here:
body { width: 100%; height: 100%; padding: 0; margin: 0; background-color: salmon; } header { width: 100%; height: 65px; background-color: crimson; display: block; position: fixed; } content { height: calc(100vh - 65px); width: 100%; display: block; margin: 0 auto; postion: relative; } .lorum { width: 60%; background-color: green; margin: 0 auto; overflow-y: hidden; padding-top: 65px; } .overlay { position: fixed; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.3; }
<body> <header>Header</header> <content> <div class="lorum"> some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data some data - some data - some data - some data - some data - some data </div> <div class="overlay"></div> </content> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.