div内容不在外部固定div内

Question

我有一个固定位置的div / modal，其中包含modal-header，modal-body和modal-footer，当我减小高度（到大约650px或以下）时，modal-body内容和modal-footer不会t停留在固定的div / modal中并开始移出视口。 如何确保模态主体和模态脚注完全位于模态内容之内？

 .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">&times;</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> 

我也在使用引导程序，因此也会应用任何默认的引导程序样式。

Answer 1

由于模态内容的高度是从父级继承的，因此您有两个选择：

1-减小.description上的高度以匹配父级的高度。

2-或移动您的overflow-y: auto; 改为.details而不是.description

您也可以在对话框上使用引导 modal-lg来扩展模态。