居中div中垂直滚动条覆盖的内容的右边缘 [英] Right edge of content covered by vertical scrollbar in centered div
本文介绍了居中div中垂直滚动条覆盖的内容的右边缘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个带有标题和下面一个或多个卡片的居中弹出窗口.每张卡都包含一张小桌子.如果显示的卡数过多，则会出现垂直滚动条.但是有问题:垂直滚动条覆盖了卡片的右边缘.
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.
行为取决于浏览器:
- Chrome :该问题在刷新页面时出现，但在调整页面大小时消失.
- Firefox :问题很严重，因为它在页面调整大小时不会消失.还有一个水平滚动条.
- 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.
重现此问题的HTML + CSS代码:
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>以上代码段查看器在Chrome中未显示问题，因此这是 jsfiddle测试页可以做到
The above snippet viewer does not show the problem in Chrome, so here is a jsfiddle test page which does:
- 打开jsfiddle页面，
- 按F5刷新它(出现问题)，然后
- 调整结果区域的大小(问题消失了).
更新
最后，我使用了@ Rayees-AC的原始想法:我将 overflow-y:auto 更改为 overflow-y:scroll .他的其他想法(完全隐藏滚动条或删除 white-space:nowrap )在我的情况下无法使用.我感谢他和@ Giant-Realistic-Flying-Tiger致力于解决这个问题！
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
我更改了以下代码.
div#content {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none;
}
div#content::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
我添加了另一个名为class wrapper
I added another div named class wrapper
.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 -不滚动的小内容自动出现
#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 -大量内容可滚动
* {
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>这篇关于居中div中垂直滚动条覆盖的内容的右边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
