如何解决居中div中垂直滚动条覆盖的内容的右边缘
我想创建一个带有标题和下面一个或多个卡片的居中弹出窗口。每张卡都包含一张小桌子。如果显示的卡过多,则会出现垂直滚动条。 但是有问题:垂直滚动条覆盖了卡片的右边缘。
行为取决于浏览器:
- Chrome :该问题在刷新页面时出现,但在调整页面大小时消失。
- Firefox :问题很严重,因为它在页面调整大小时不会消失。还有一个水平滚动条。
重现此问题的HTML + CSS代码:
NodePort
* {
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;
}
上面的代码片段查看器在Chrome中没有显示问题,因此,这里的jsfiddle test page可以做到:
- 打开jsfiddle页面,
- 按F5刷新它(出现问题),然后
- 调整结果区域的大小(问题消失了)。
更新
最后,我使用了@ Rayees-AC的原始想法:我将<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>
更改为overflow-y: auto
。他的其他想法(完全隐藏滚动条或删除overflow-y: scroll
)在我的情况下无法使用。我感谢他和@ 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 */
}
我添加了另一个名为类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,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,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>
,
仅对Firefox使用padding-right
和overflow:hidden
。效果很好。
我也看不到Chrome出现任何问题。
* {
margin: 0;
padding: 0;
font-family: Verdana,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;
}
/* check firefox browser */
@-moz-document url-prefix() {
div#content{
overflow-x: hidden;
}
div.card {
padding-right:25px; /* 10px card padding + 15px firefox scrollbar width */
}
}
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。