问题
I'd like to create a centered popup with a title and one or more cards under it. Each card contains a small table. When there are more cards than can be displayed, a vertical scrollbar appears. But there is problem: the vertical scrollbar covers the right edge of the cards.
The behavior depends on the browser:
- Chrome: The problem appears when the page is refreshed, but disappears when the page is resized.
- Firefox: The problem is more serious, because it doesn't disappear on page resize. There is also a horizontal scrollbar.
The HTML+CSS code that reproduces the problem:
* {
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>The above snippet viewer does not show the problem in Chrome, so here is a jsfiddle test page which does:
- open the jsfiddle page,
- press F5 to refresh it (the problem appears), then
- resize the results area (the problem disapears).
UPDATE
In the end I used the original idea of @Rayees-AC: I changed overflow-y: auto to overflow-y: scroll. His other ideas (hiding the scrollbar entirely or removing white-space: nowrap) couldn't be used in my case. I'm grateful for him and @Giant-Realistic-Flying-Tiger for working on this problem!
回答1:
#1 - Without showing scrollbarscroll enabled
I changed below code.
div#content {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none;
}
div#content::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
I added another div named class wrapper
.wrapper{
width: 100%;
height: 100%;
overflow: hidden;
}
Try this snippet
* {
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 - Automatically small content not scrolling
* {
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 - Large content makes scrolling
* {
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>回答2:
Use padding-right and overflow:hidden for only Firefox. This works perfectly.
Also I can't see any problem for Chrome.
* {
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;
}
/* 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>来源：https://stackoverflow.com/questions/63358951/right-edge-of-content-covered-by-vertical-scrollbar-in-centered-div