スクロール可能な要素の絶対要素

私はモーダルを持ち、最大高さモーダル体を持っています。モーダルボディにはoverflow: autoがあり、これはdatepickerをカットします。オーバーフローをオフにすると、日付ピッカーは完全な次元で表示されますが、同時にボディのコンテンツはモーダルのフッターをカバーします。スクロール可能な要素の絶対要素

（例のように）モーダル本体をスクロール可能にしたいのですが、完全なdatepickerを見たいと思います。ここで

は、問題のデモです：

#page { 
 
    background: #c4c4c4; 
 
    height: 100vh; 
 
} 
 
#modal { 
 
    background: #d4d4d4; 
 
    height: 60vh; 
 
    margin: 20px; 
 
    position: fixed; 
 
} 
 
#modal-body { 
 
    background: #4d4d4d; 
 
    height: 200px; 
 
    width: 200px; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 
#modal-header, 
 
#modal-footer { 
 
    background: #5d5d5d; 
 
} 
 
#datepicker { 
 
    background: #a5a5a5; 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    top: -30px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div id="page"> 
 
    <div id="modal"> 
 
     <div id="modal-header"> 
 
     HEADER 
 
     </div> 
 
     <div id="modal-body"> 
 
     <div id="datepicker">datepicker</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     <div>BODY BODY</div> 
 
     </div> 
 
     <div id=modal-footer> 
 
     FOOTER 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

EDIT

は、日付ピッカーは、サードパーティのライブラリ（https://eonasdan.github.io/bootstrap-datetimepicker/）であり、それは自身の位置を（計算します上、左など）私はそれを支配していない。ここで

は、（実際のDateTimePickerのプラグインとの）問題のより完全なデモです：https://jsbin.com/sopevaxogu/7/edit?html,css,output

出典

2017-01-07 user3568719

あなたが使っているどの日付ピッカーライブラリにリンクする必要があります。 – Jacob

機能的な例がありますか？ – Ouroborus

@Jacob https://eonasdan.github.io/bootstrap-datetimepicker/ – user3568719

完全な日付ピッカーを表示し、スクロール可能#modal-bodyを持って、日付ピッカーからtop: -30px;を削除するには。ここでは、彼らはすでにサードパーティから設定している場合、あなたが使用し、autoにそれらをリセットするために!importantを使用することができますposition: fixed;にポップアップ日付ピッカーを設定し、任意のtopなし、right、bottom、left値できるデモhttp://codepen.io/anon/pen/ZLGJKb

出典

2017-01-07 00:16:37

datepickerはサードパーティ製のライブラリで、独自の位置（上、左など）を計算します。私はそれを制御できません。 – user3568719

@ user3568719問題を再現するための完全なコードを使用して、デモを行ってください。 –

私のアップデートのJsBinリンクを参照 – user3568719

ですmarginを使用して、必要に応じて位置を制御します。あなたはmodal-bodyでdivを追加するためのHTMLを変更することができるかどう

jsBin

は、別の方法があります。

<div id="modal-body"> 
    <div id="modal-scroll"> 
    ... 
    </div> 
</div>

#modal-body { 
    position: relative; 
    height: 30vh; 
} 
#modal-scroll { 
    overflow: auto; 
    height: 100%; 
}

jsBin

出典

2017-01-07 00:17:22 Stickers

スクロール可能な要素の絶対要素

答えて

関連する問題