Question

我有一个固定位置的div / modal，它包含一个模态标题，模态体和模态页脚，当我减小高度（大约650px或更低）时，模态体内容和模态 - 页脚不会停留在固定的div /模态内并开始移出视口。如何确保模态体和模态页脚完全保留在模态内容中？

＆＃13;

.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%;
    }
}

＆＃13;

<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>

＆＃13;

我也使用bootstrap，因此也会应用任何默认的bootstrap样式。

Answer 1

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

1-降低.description的高度以匹配父级的高度。

2-或将overflow-y: auto;移至.details而不是.description

您还可以在对话框中使用bootstrap modal-lg来扩展模态。

div内容不在外部固定div内

1 个答案: