位置をスクロールする方法：bowserスクロールで絶対？

Question

私は3つのdiv-layersを持っています。最初のレイヤーは指定された高さの背景です。 2番目のレイヤーはコンテンツクラスの透過divです.3番目のレイヤーにコンテンツがあります。 .contentクラスのスクロールを削除したいと思い、ブラウザのスクロールでテキストをスクロールしたいと思います。どうしたらいいですか？ここで

.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; 
 
}

<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>

完全な例です：https://jsfiddle.net/yrp4pmmc/2/

Answer 1

ブラウザウィンドウは、それが表示されません400px` `よりも高さ以下である場合を除きあなたは、何か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; 
} 

Answer 2

私はあなたの質問を誤解してきた場合を除き、あなたがしなければならないすべてはあなたの絶対位置を削除し、親div 100％の高さを作るです。

divの指定された高さを削除すると、divのデフォルト設定と同じように、divのコンテンツのサイズが決まります。 .content要素の幅を制限してスクロールする機能を削除すると、.containerはその子要素の高さ全体を占有する必要があります。

.container{ 
    background-color:black; 
    height: 100%; 
    width:100%; 
} 

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

.content{ 
    width:200px; 
    margin: 0 auto; 
    background-color:white; 
    overflow:auto; 
    height: auto; 
} 

https://jsfiddle.net/Kyle_/yrp4pmmc/3/