我创建了一个包含 2 个部分的模态窗口:header
和 ul
。我使用 jQuery 打开模式。到目前为止,一切都很好。我想让 ul
适合模态框而不会溢出。
我可以溢出 .modal
。但是,我真的只是想溢出 ul
,而不是整个 .modal
框。
https://jsfiddle.net/tjL1e0ca/
$(document).on("click", "h3", function(e) {
$(".modal").css("display", "block");
})
.modal {
display: none;
position: fixed;
z-index: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 650px;
max-height: calc(100% - 60px);
padding: 30px 20px 20px;
/*overflow: auto;*/
border: 3px solid black;
background-color: #ccc;
}
.modal_1 ul {
background-color: red;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>click here to open modal</h3>
<div class="modal">
<div class="modal_1">
<div>
<h1>HEADER GOES HERE</h1>
<h2>SUB GOES HERE</h2>
</div>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
最佳答案
将 style="overflow-y: auto; height: 100px;"
添加到您的 ul
。这基本上将 overflow-y
添加到您的 ul,除非它仅在您指定高度时才有效。
我更新了你的 JSFiddle为你。
根据需要更改高度。
更新: 看了评论后,我明白了你想让ul的高度自适应而不是设置。要解决此问题,请将高度从 height: 100px;
更改为 height: 50%;
(并根据需要更改百分比)。这样,无论模态的高度如何,ul 将始终为模态的 50%。因为它似乎对这里的片段不起作用,所以我做了一个 JSFiddle为你。
$(document).on("click", "h3", function(e) {
$(".modal").css("display", "block");
})
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
h3 {
cursor: pointer;
}
.list {
overflow-y: auto;
height: 100px;
}
.modal {
display: none;
position: fixed;
z-index: 700;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 650px;
max-height: calc(100% - 60px);
padding: 30px 20px 20px;
/*overflow: auto;*/
border: 3px solid black;
background-color: #ccc;
}
.modal_1 ul {
background-color: red;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>click here to open modal</h3>
<div class="modal">
<div class="modal_1">
<div>
<h1>HEADER GOES HERE</h1>
<h2>SUB GOES HERE</h2>
</div>
<ul class="list">
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
关于javascript - 如何使用 CSS 溢出模态窗口的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54961440/