絶対配置されたdivでスクロールを有効にする方法は、ビューポートに適合しません。

Question

私はDIVが絶対的な位置にあり、高さと幅が定義されていて、内容は内部にあります。オーバーレイ上スクロール：

NORMAL VIEWPORT

---

SMALL HEIGHT VIEWPORT

私はオーバーフローを使用して試してみた：問題は、div要素は、ビューポートの高さに収まらない場合、それはこのように、アウトクロップなっていること、ですdiv（黒い背景）は、div自体と体には何も働いていません（期待通り）、javascriptなしの解決策はありますか？そのDIVのと黒の背景に、そしてbody上

HTML

<div id="overlay"> 
    <div id="login"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
</div> 

CSS

#overlay{ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background: rgba(0,0,0,.8); 
    z-index: 100; 
} 

#login{ 
    width: 250px; 
    height: 320px; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
    margin: auto; 
    background: #fff; 
} 

Answer 1

使用overflow: visible：overflow: auto。そうすれば、その中の要素がウインドウの高さよりも高いときに本体をスクロールできます。私のコメントから

Answer 2

：

あなたがオーバーフローを試してみました：自動;高さの代わりに値と最大高さ？

#overlay{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    background: rgba(0,0,0,.8); 
 
    z-index: 100; 
 
} 
 

 
#login{ 
 
    width: 250px; 
 
    max-height: 320px; 
 
    overflow:auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    position: absolute; 
 
    margin: auto; 
 
    background: #fff; 
 
}

<div id="overlay"> 
 
    <div id="login"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div>