test123456 test123456 - 13 days ago 18
HTML Question

how to scroll a position:absolute with the bowser scroll?

I have three div-layers. The first layer is the background with a designated height. the second layer is a transparent div for the content-class.In the third layer is the content. I want to remove the scroll of .content class and I want to scroll the text with the browser scroll. How can I do it?

CSS

.container{
background-color:black;
height:400px;
wdith:100%;
}

.backtransparent{
background-color: gray;
width:250px;
height:100%;
margin: 0 auto;
}

.content{
width:200px;
margin: 0 auto;
background-color:white;
position:absolute;
overflow:auto;
height:400px;
left: 0;
right:0;
}


HTML

<div class="container">
<div class="backtransparent">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odddio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur...
</div>
</div>
</div>


Here is the full example: https://jsfiddle.net/yrp4pmmc/2/

sTx sTx
Answer

You mean something like this?

.container{
background-color: black;
height: 400px;
width: 100%;
overflow: auto;
}
.content{
width: 240px;
margin: 0 auto;
background-color: white;
left: 0;
right: 0;
border-left: 20px solid grey;
border-right: 20px solid grey;
}