我目前有一个最大高度为 800px 的容器。它还具有溢出-y：滚动。我想要完成的事情很简单（可能不那么简单，因此我问你们！）。
我想继续拥有这个溢出滚动。但是，我的内容被切断了。我有一个带有 future-dropdown 类的 div，我希望其中的内容有意覆盖此容器。如果你看一下代码片段，我的 div 内的内容会因为溢出滚动而被切断。
我怎样才能解决这个问题并仍然拥有这个？我仍然需要这个可滚动容器，但我还需要一种方法来让我的内容仍然显示在该位置。
请提出建议！
* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown {
position: relative;
left: 200px;
} <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>也许你可以做这样的事情
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: left; /*Change from center to left*/
list-style-type: none;
background: lightgray;
padding: 20px; /*Add some padding*/
/* margin: 0 auto; */
}
如果对您有帮助，请告诉我！
看看这个代码片段。
我添加了以下CSS，
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}
由于使用
divleft* {
padding: 0;
margin: 0;
}
.scroll-list {
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
border: 5px solid blue;
width: 400px;
}
li {
height: 200px;
width: 100%;
border-radius: 2px;
background-color: white;
font-size: 15px;
text-align: center;
list-style-type: none;
background: lightgray;
/* margin: 0 auto; */
}
.future-dropdown1 {
position: relative;
text-align: right;
}
.future-dropdown2 {
position: relative;
float: right;
margin-top: 20px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="scroll-list">
<ul>
<li>Content <div class="future-dropdown1">Future dropdown</div></li>
<li>Content <div class="future-dropdown2">Future dropdown</div></li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>对于因为滚动条后面隐藏内容而来到这里的任何人，请检查 html、正文和/或容器的宽度。对我来说，将宽度从 100vw 更改为 100% 解决了这个问题。