Absolutes Element in einem scrollbaren Element

Ich habe ein Modal, mit einer maximalen Höhe Modal-Körper. Der Modal-Body hat overflow: auto, was den Datepicker schneidet. Versuchen Sie, den Überlauf auszuschalten, der Datapicker wird mit seiner vollen Dimension angezeigt, aber gleichzeitig deckt der Inhalt des Codes die Fußzeile des Modals ab.Absolutes Element in einem scrollbaren Element

Ich möchte den Modal-Body scrollbar haben (genau wie im Beispiel), aber ich möchte den vollen Datepicker sehen.

Hier ist eine Demonstration des Problems:

#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

Der Datepicker ist ein 3rd-Party-Bibliothek (https://eonasdan.github.io/bootstrap-datetimepicker/) und berechnet seine eigene Position (oben, links usw.) Ich habe keine Kontrolle darüber. Hier

ist eine vollständigere Demo des Problems (mit der aktuellen Datetimepicker-Plugin): https://jsbin.com/sopevaxogu/7/edit?html,css,output

Quelle

2017-01-07 user3568719

Sie verknüpfen sollten Bibliothek, auf die Datumsauswahl Sie verwenden. – Jacob

Haben Sie ein funktionierendes Beispiel? – Ouroborus

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

die vollen picker Um zu zeigen, und hat #modal-body scrollbaren, entfernt top: -30px; von picker. Hier ist eine Demo http://codepen.io/anon/pen/ZLGJKb

Quelle

2017-01-07 00:16:37

datepicker ist eine 3rd-Party-Bibliothek, und es berechnet seine eigene Position (oben, links, etc.) Ich habe keine Kontrolle darüber. – user3568719

@ user3568719 Bitte geben Sie uns eine funktionierende Demo mit komplettem Code, um das Problem zu reproduzieren. –

Siehe den JsBin Link in meinem Update – user3568719

Sie die Popup-Datepicker auf position: fixed; setzen und ohne top, right, bottom, left Werte, wenn sie bereits von den 3.en Parteien eingestellt sind, können Sie !important verwenden, um sie auto zurücksetzen, dann verwenden margin, um die Position nach Bedarf zu steuern.

jsBin

Es gibt eine andere Art und Weise, wenn Sie den HTML-Code ändern können div in modal-body hinzuzufügen.

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

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

jsBin

Quelle

2017-01-07 00:17:22 Stickers

Absolutes Element in einem scrollbaren Element

Antwort

Verwandte Themen