0
我有一個固定位置的div /模式，其中包含模式標題，模態主體和模態頁腳，當我降低高度（約650px或更低）時，模態體內容和模態頁腳不會保留在固定的div /模式中，並開始移出視口。我怎樣才能確保模態主體和模態角色完全處於模態內容之中？div內容不停留在外部固定格
.modal-header {
font-size: 18px;
}
.details {
width: 600px;
min-height: 500px;
background-color: #fff;
position: fixed;
border: 1px solid #888;
box-shadow: 1px 1px 15px #888;
top: 50%;
left: 50%;
margin-top: -350px;
margin-left: -300px;
border-radius: 10px;
z-index:1002;
}
.description {
padding: 25px;
overflow-y: auto;
max-height: 600px;
}
@media (max-width: 620px) {
.details {
width: 96vw;
left: 0%;
margin-left: 0px;
}
}
@media (max-height: 710px) {
.details {
height: 100vh;
margin-top: 0px;
top: 0%;
}
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="details modal-content" style="display: block">
<div class="modal-header">Modal Title
<button type="button" class="close">×</button>
</div>
<div class="modal-body description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non ex lacus. Sed porta nibh ac scelerisque consectetur. Praesent efficitur non massa et finibus. Donec ullamcorper nisl at arcu tempor, nec placerat ante finibus. In eu diam quis magna
tincidunt pretium a id elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut eros congue, molestie nibh id, finibus risus. In ut pellentesque quam. Morbi consectetur orci in quam luctus, id
porttitor eros vulputate. Ut at nisl nec sem dapibus vestibulum in id ex. In fermentum eget nunc sit amet blandit. Morbi volutpat, nunc eu tincidunt accumsan, ligula sapien aliquam elit, at laoreet quam libero vitae diam. Mauris feugiat malesuada
tellus eu gravida. Fusce posuere ligula sed lorem condimentum mattis. Ut pretium vel orci vitae tempor. Ut imperdiet sit amet lacus vel dignissim. Mauris nec euismod ipsum, et porttitor ipsum. Etiam consequat, libero at elementum rutrum, neque
mauris pharetra tellus, ac volutpat mi nulla eu velit. Integer eu massa suscipit, pharetra mauris ac, luctus arcu. Duis vel blandit nibh, et finibus sem. Nam nec neque nulla. In a congue magna. Nunc varius pulvinar mollis. Pellentesque nulla diam,
tristique nec vestibulum sit amet, efficitur sit amet mauris. Etiam sed tempus orci, a viverra risus. Mauris at posuere neque. Fusce laoreet, lectus a consectetur maximus, enim libero scelerisque lectus, eget dignissim lorem lorem vitae nisi.
Nam purus purus, tempor vel placerat eu, laoreet et libero. Mauris eget posuere erat. Aliquam eu nulla eget enim accumsan ullamcorper. Morbi vitae odio a velit sollicitudin euismod. Phasellus eu libero arcu. Suspendisse volutpat ipsum eu nisi
tempor, non pulvinar turpis sagittis. Vivamus nec viverra enim. Curabitur tempus ex interdum lectus venenatis, id pellentesque turpis interdum. Phasellus viverra est eu purus sagittis iaculis pellentesque at urna. In euismod elit id volutpat euismod.
Maecenas tempor varius est, vitae lacinia massa sodales vitae. Suspendisse in lacus mi. Nulla eget urna in justo accumsan fringilla vitae id tellus. Donec semper sapien quis ex imperdiet, ut luctus mauris ullamcorper. Proin volutpat non metus
sit amet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam libero lectus, pretium at rutrum vitae, semper id massa. Aliquam imperdiet quam purus, eget sodales elit mattis sed. Aliquam imperdiet
eros leo, malesuada mattis ex commodo quis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Close</button>
</div>
</div>我還使用自舉，所以任何標準的引導方式也適用。
最簡單的解決方案是從'.modal-content.details'和'overflow：auto;'移除'height：100vh'。最大高度：600px從'.description' - 這樣整個模態將在需要時滾動。 –