divコンテンツが外側固定ディビジョン内に収まらない

Question

私は、モーダルヘッダ、モーダルボディ、モーダルフッタを含む固定位置のdiv/modalを持っていますが、高さを低くすると（約650px以下に）、モーダルボディの内容とモーダルフッタは、固定された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">&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

モーダルコンテンツの高さは、次の2つのオプションがあり、親から継承されているので：

1-親の高さに合わせて.descriptionの高さを減らします。

2-もしくはあなたのoverflow-y: auto;.detailsに代わりの.description

また、あなたはモーダルを拡張するために、あなたのダイアログのbootstrapmodal-lgを使用することができますを移動します。