问题描述
我目前正在尝试使用bootstrap dropright函数实现可滚动的侧边栏。这样，当用户单击侧栏项目时，菜单应显示在右侧。我能够使可滚动部分正常工作，但是当菜单中的文本较长时，下拉菜单会被剪切。我尝试更改z-index，以使快捷菜单显示在顶部，但也不起作用。如果我从overflow:auto删除#sidebar，它可以按预期工作，但我希望边栏可滚动，因此{{ 1}}是必需的。
Codepen
解决方法
查看此代码段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#sidebar {
display: inline-block;
vertical-align: top;
width: 18%;
background-color : red;
}
#sidebar-content {
display: inline-block;
vertical-align: top;
width: 100%;
overflow-y: auto;
}
#content {
position : relative;
z-index : 10;
display: inline-block;
vertical-align: top;
width: 82%;
overflow: auto;
background-color : green
}
</style>
</head>
<body>
<div id="container" class="h-100">
<div id="sidebar" class="h-100" >
<div class="container" id="sidebar-content-header">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px,0px,0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Some long text which should just appear on top of content area</a>
</div>
</div>
</div>
<div class="container h-100" id="sidebar-content">
<ul>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
</ul>
</div>
</div><!--
--><div id="content" class="h-100">
<div id="main-content">
Lorem,ipsum dolor sit amet consectetur adipisicing elit. Qui cupiditate ullam provident eveniet,beatae fuga quidem corrupti dignissimos illo debitis. Nihil ratione odit quaerat sint consequatur ea minus obcaecati illo. Aliquid blanditiis aliquam illo,quod fuga,fugiat iste modi repudiandae vel cum repellendus consequuntur rerum doloremque,voluptate nihil dignissimos error dolorum esse delectus sapiente cupiditate ipsam quis aut dicta. Quam minus dolorum illo doloribus laboriosam ipsa consequatur fugit,praesentium itaque in,nulla tempora at explicabo rerum corporis soluta,recusandae culpa hic quod magnam corrupti. Hic temporibus autem error,obcaecati ducimus modi,quaerat eum ipsa,suscipit rerum sequi eaque praesentium commodi laborum id voluptate ullam impedit quos architecto! Dolorum et iste maiores laborum assumenda,ea repellendus totam voluptate,accusamus hic quis quisquam veritatis tempore impedit itaque aperiam eligendi maxime. Hic ducimus illum assumenda,eos expedita maxime nobis corporis? Voluptatem illum maiores esse at! Incidunt exercitationem quis sapiente? Ipsam sit natus magnam quidem veritatis,labore culpa vel pariatur deserunt sunt,voluptate quos sint,nobis perspiciatis cupiditate asperiores. Numquam deserunt omnis consectetur excepturi quos vitae suscipit commodi aliquid unde libero,veniam,modi ipsa voluptate provident exercitationem debitis qui molestias aperiam incidunt sequi! Autem earum ipsam consequuntur asperiores maxime aut ut,deserunt ducimus quae nemo unde porro quas. Reiciendis recusandae laborum repellat non minus veniam quae,quidem dolore cumque at quasi facilis nisi eligendi quisquam,adipisci commodi debitis dicta aliquam magni illo nesciunt! Ab facere nisi omnis nulla,ea voluptatibus non veritatis tempora sapiente vero vel fugiat minima obcaecati magni ut eaque ipsa ex quasi pariatur unde blanditiis dolorum. Velit quasi minima facilis sed consequuntur veniam! Saepe deleniti doloribus iste,unde sequi neque quod velit ullam,exercitationem nemo earum quisquam omnis quibusdam tenetur hic vitae soluta magnam quam explicabo adipisci non? Aspernatur saepe laboriosam commodi molestias quam veritatis explicabo. Odio totam distinctio ut,quas similique,natus excepturi nostrum reprehenderit ex sed beatae nemo odit maxime itaque,expedita dignissimos animi aspernatur. Debitis animi magnam esse vel distinctio! Dignissimos,nemo modi dolor facere at accusamus rem pariatur,quae iure deserunt laudantium sint laborum,ducimus reiciendis exercitationem blanditiis ratione architecto quos voluptatibus fuga autem praesentium omnis natus ea! Voluptatum quidem officiis placeat libero quam aperiam accusantium,repellat commodi exercitationem et distinctio doloremque nulla,dolores qui numquam quas molestiae voluptatem. Voluptatum amet ullam laudantium nihil recusandae odit reprehenderit atque! Assumenda fugit debitis voluptatem dolorem quos. Vel quisquam libero vero ea dolores ut,maiores quis eos debitis sit illo iusto ad repellat modi nobis id rem animi quidem sapiente harum aspernatur obcaecati adipisci doloremque? Temporibus minus nostrum illum nulla sapiente aperiam tempore. Omnis ut molestias quod quis amet consectetur veritatis? Dicta quidem est ducimus quas pariatur tempore odit deserunt eligendi mollitia minima,reiciendis perspiciatis? Libero repudiandae mollitia,adipisci animi accusantium numquam praesentium enim eius illum. Inventore veniam recusandae,rem suscipit,laborum consectetur aliquid cumque dolores repellat velit impedit iure perspiciatis doloremque odio! Et provident reiciendis commodi. Necessitatibus dolores,autem ab et perferendis consequuntur cumque non quibusdam,explicabo,quo in doloribus veritatis quas aperiam asperiores harum provident maxime. Ipsum,doloribus expedita harum similique praesentium fuga reiciendis ea nisi vel,iure explicabo,inventore repellat nesciunt id modi error dolore officiis provident vitae fugit in deserunt eius exercitationem incidunt. Iure,quisquam atque! Qui corporis dolore ea,quo at a perspiciatis voluptatibus voluptatum aliquam dolor fugit voluptate,doloribus aspernatur quisquam veritatis nam eligendi. Ab tempore quod possimus aliquid dolores,omnis perspiciatis molestias delectus repellat animi repudiandae? Voluptatem nihil totam fugiat amet maiores! Eius soluta natus facere? Sequi ipsa facere odio enim! Neque commodi illum,repudiandae voluptatum nobis tenetur eligendi ratione dolore error soluta saepe nostrum assumenda officiis et,eius laborum provident dolorem. Recusandae eligendi reprehenderit cumque quam nam ipsam eos fugit obcaecati,illo,voluptatem sed dignissimos,adipisci vero aut veritatis expedita? Commodi minus voluptas laboriosam sed praesentium inventore ipsa magni aliquam,placeat necessitatibus eum dolor ipsam quia quod aspernatur odit id doloremque consectetur,maiores quo quos. Expedita tempora quas quo blanditiis quos commodi quis amet. Repellendus ullam animi veritatis,a nobis eum illo sequi illum quaerat molestias error atque,sint quod. Ratione,fugit possimus sint facere illum repudiandae nostrum sit eum labore blanditiis amet ea deserunt eos sunt temporibus quidem aliquam tempora,pariatur quasi itaque iure? Saepe quibusdam ullam laborum cumque debitis,temporibus corrupti? Nostrum ratione odit commodi veritatis,obcaecati assumenda ipsam dolorem non vitae vero numquam perferendis fuga. Perferendis ab eum,illum nulla,dolorem nam maiores vero debitis accusamus pariatur in architecto fuga expedita. At sequi ducimus sed provident eos laboriosam laudantium totam maxime voluptatum vero ut distinctio cum veniam ipsum quaerat id temporibus ratione non aliquid itaque dolor sapiente,inventore optio quae. Reprehenderit ipsam,eius expedita autem ipsum molestias earum,vitae doloremque cum asperiores nobis enim rem. Consequuntur eaque recusandae eligendi aliquam ducimus ut,quaerat obcaecati reiciendis,dolorum minima similique amet,ipsam at! Autem eveniet explicabo dicta,maiores perspiciatis omnis veniam,possimus exercitationem magni quasi dolore cumque accusantium vero facilis nostrum ad expedita laboriosam. Doloribus alias ad,sit ullam,voluptatum dolorem asperiores saepe hic,impedit et excepturi sunt. Ducimus laudantium numquam deserunt et nam exercitationem accusamus,aliquam dolor sunt reprehenderit architecto iure! Ullam facilis veniam fugiat rerum provident ratione reiciendis ea sit ipsum nihil alias quas sunt vel rem,necessitatibus odio minus? Vitae magnam maiores,cupiditate quos sequi necessitatibus,deserunt at,vero possimus aspernatur architecto? Voluptas,voluptate et. Sequi sint ex doloremque corrupti labore quas dolorum distinctio ea porro deserunt. Illum eos aliquid voluptatibus minima fugiat praesentium voluptatum deserunt aspernatur doloribus,iusto at enim ad soluta neque eveniet tenetur,autem ratione unde voluptas? Suscipit quas similique ad odit laudantium vitae illo officiis,consequatur facilis fugit,hic harum eius eveniet obcaecati,dolores quasi ipsum? Iusto,a minus totam blanditiis excepturi autem reprehenderit ipsa quia suscipit aspernatur praesentium consequuntur neque fugiat laborum itaque ratione? Tempore modi at maxime voluptas saepe odio deleniti? Veritatis possimus officiis,consequatur amet sapiente nihil voluptatibus. Asperiores minus beatae,maxime dolores voluptas,vel illum dolorum minima mollitia,eligendi iste debitis necessitatibus enim earum voluptates saepe molestias? Dolorum eum reiciendis voluptatem,pariatur assumenda quasi? Explicabo dolores magni nulla enim voluptatum.
</div>
</div>
</div>
</body>
</html>
我已采取的步骤：
- 在侧边栏 中其自己的部分中已移动的下拉按钮，我们可以单独控制。
- 将
h-100应用于容器，侧边栏和 content ，以便它们可以达到视口的整个高度。 - 应用了溢出-y：自动添加到侧边栏，以便仅在需要时才使用垂直滚动条，就像您在 content 部分中所做的那样。
其他说明：您可能有兴趣将p-1/p-2/p-3/p-4填充类应用于侧边栏和 content 部分，以使它们看起来更好
对于遇到相同问题的任何人，我发现了一篇对我有帮助的文章：https://css-tricks.com/popping-hidden-overflow/
因为如果垂直溢出不可见，我们将看不到水平溢出，反之亦然。
$(function() {
// whenever we hover over a menu item that has a submenu
$('li.parent').on('mouseover',function() {
var $menuItem = $(this),$submenuWrapper = $('> .wrapper',$menuItem);
// grab the menu item's position relative to its positioned parent
var menuItemPos = $menuItem.position();
// place the submenu in the correct position relevant to the menu item
$submenuWrapper.css({
top: menuItemPos.top,left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
});
});
});.wrapper {
position: relative;
}
ul {
width: 200px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
li {
position: static;
}
li .wrapper {
position: absolute;
z-index: 10;
display: none;
}
li:hover > .wrapper {
display: block;
}
ul {
margin: 1em;
color: white;
font-family: sans-serif;
font-size: 16px;
}
li {
padding: 1em;
}
li ul {
margin: 0;
}
li .wrapper {
cursor: auto;
}
li .wrapper li {
padding: 0.5em;
}
li:nth-child(2n) {
background: #0e8ce0;
}
li:nth-child(2n+1) {
background: #0064b3;
}
li.parent {
background: #00b99b;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
<li class="parent">Abc >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>