I wan't the content to scroll up but it should never be visible behind the menu. Which is hard cause it's transparant. So I use a div to use it as a mask. But for some reason that doesn't allow for my content to scroll.
HTML:
<div class="title">
title
</div>
<div class="menu">
menu
<button class="btn">Foo</button>
</div>
<div class="content-mask">
<div class="asfsadf">
scroll content<br/>
scroll content<br/>
scroll content<br/>
scroll content<br/>
scroll content<br/>
</div>
</div>
CSS:
.title {
position: fixed;
top: 0;
}
.menu {
position: fixed;
top: 20px;
border: 1px solid black;
}
.content-mask {
position: fixed;
top: 40px;
overflow: scroll;
}
.content {
}
body {
background-image: url("https://pbs.twimg.com/media/ChtN47lVAAAQWD1.jpg:large");
}
Add height to .content-mask:
.content-mask {
position: fixed;
top: 40px;
overflow: scroll;
height: calc(100vh - 40px);
}
https://jsfiddle.net/8ha45uao/
Or just add height and overflow: auto to content container:
.asfsadf {
margin-top: 40px;
height: calc(100vh - 40px);
overflow: auto;
}
https://jsfiddle.net/34Lf1mke/3/
If you care about old browsers, you can make javascript fallback to calculate height.
You should used background color for your fixed div with 100% width. And set top-margin to "content-mask" div as height of fixed div.
try this
.asfsadf{
width: 500px;
height: 200px;
overflow-y: scroll;
overflow-x:hidden;
}
For the scrolling the container using overflow property , the container must be given a fixed height and width.
Live Demo:
https://jsfiddle.net/0t8oh85y/
The corrected css in your case is.
.title {
position: fixed;
top: 0;
}
.menu {
position: fixed;
top: 20px;
border: 1px solid black;
}
.content-mask {
position: fixed;
top: 40px;
left: 0px;
overflow-y: scroll;
max-height: calc( 100% - 40px);
width: calc( 100% );
}
.content {
}
html{
width: 100%;
height: 100%;
}
body {
overflow: hidden;
background-image: url("https://pbs.twimg.com/media/ChtN47lVAAAQWD1.jpg:large");
background-size:cover;
background-position: center center;
height: 100%;
width: 100%;
}
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.