我想创建一个带有标题和一张或多张卡片的居中弹出窗口。每张卡片都包含一张小 table 。当卡片数量超过可以显示的数量时,会出现一个垂直滚动条。 但是有一个问题:垂直滚动条覆盖了卡片的右边缘。
行为取决于浏览器:
重现问题的HTML+CSS代码:
* {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
}
html,
body {
height: 100%;
min-height: 500px;
}
div#container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
min-height: 500px;
background: coral;
}
div#frame {
padding: 15px;
background: lightgreen;
}
h1 {
margin-bottom: 10px;
font-size: 20px;
}
div#content {
max-height: 300px;
overflow-y: auto;
background: lightblue;
}
div.card {
display: table;
padding: 10px;
background: lightyellow;
font-size: 15px;
}
div.card:not(.last-card) {
margin-bottom: 5px;
}
table {
border-collapse: collapse;
}
td {
padding: 5px;
background: lightpink;
white-space: nowrap;
}
<div id="container">
<div id="frame">
<h1>Frame Title</h1>
<div id="content">
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<!---->
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card last-card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
上面的片段查看器在 Chrome 中没有显示问题,所以这里是一个 jsfiddle test page这样做:
更新
最后用了@Rayees-AC的原思路:我改了
overflow-y: auto
至 overflow-y: scroll
.他的其他想法(完全隐藏滚动条或删除 white-space: nowrap
)在我的情况下无法使用。我很感谢他和@Giant-Realistic-Flying-Tiger 解决这个问题!
最佳答案
#1 - 不显示滚动条已启用
我改变了下面的代码。
div#content {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none;
}
div#content::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
我添加了另一个名为 class wrapper
的 div.wrapper{
width: 100%;
height: 100%;
overflow: hidden;
}
试试这个片段 * {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
}
html,
body {
height: 100%;
min-height: 500px;
}
div#container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
min-height: 500px;
background: coral;
}
div#frame {
padding: 15px;
background: lightgreen;
}
h1 {
margin-bottom: 10px;
font-size: 20px;
}
.wrapper{
width: 100%;
height: 100%;
overflow: hidden;
}
div#content {
max-height: 300px;
overflow-y: auto;
background: lightblue;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none;
}
div#content::-webkit-scrollbar {
display: none;
}
div.card {
display: table;
padding: 10px;
background: lightyellow;
font-size: 15px;
}
div.card:not(.last-card) {
margin-bottom: 5px;
}
table {
border-collapse: collapse;
}
td {
padding: 5px;
background: lightpink;
}
<div id="container">
<div id="frame">
<h1>Frame Title</h1>
<div class="wrapper">
<div id="content">
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<!---->
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card last-card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
#2 - 自动小内容不滚动
* {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
}
html,
body {
height: 100%;
min-height: 500px;
}
div#container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
min-height: 500px;
background: coral;
}
div#frame {
padding: 15px;
background: lightgreen;
}
h1 {
margin-bottom: 10px;
font-size: 20px;
}
.wrapper{
width: 100%;
height: 100%;
overflow: hidden;
}
div#content {
max-height: 300px;
overflow-y: auto;
background: lightblue;
}
div.card {
display: table;
padding: 10px;
background: lightyellow;
font-size: 15px;
}
div.card:not(.last-card) {
margin-bottom: 5px;
}
table {
border-collapse: collapse;
}
td {
padding: 5px;
background: lightpink;
}
<div id="container">
<div id="frame">
<h1>Frame Title</h1>
<div id="content">
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
#3 - 大内容使滚动
* {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
}
html,
body {
height: 100%;
min-height: 500px;
}
div#container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
min-height: 500px;
background: coral;
}
div#frame {
padding: 15px;
background: lightgreen;
}
h1 {
margin-bottom: 10px;
font-size: 20px;
}
div#content {
max-height: 300px;
overflow-y: auto;
background: lightblue;
}
div.card {
display: table;
padding: 10px;
background: lightyellow;
font-size: 15px;
}
div.card:not(.last-card) {
margin-bottom: 5px;
}
table {
border-collapse: collapse;
}
td {
padding: 5px;
background: lightpink;
}
<div id="container">
<div id="frame">
<h1>Frame Title</h1>
<div id="content">
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<!---->
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card last-card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
关于html - 居中 div 中被垂直滚动条覆盖的内容的右边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63358951/