2023年2月27日 05:14:01go评论56阅读模式

英文:

Stop child overflowing parent

问题

如何使侧边栏可滚动，最好使用Bootstrap类？

要使侧边栏可滚动，您可以使用Bootstrap的overflow-auto类，该类会在内容溢出时自动显示滚动条。请按照以下步骤进行操作：

将overflow-y: hidden和max-height: 100vh从main中移除，以允许内容溢出。
为侧边栏的list-group元素添加Bootstrap的overflow-auto类。

修改后的HTML和CSS代码如下：

<!-- language: lang-css -->
main {
  height: 100vh;
}

.list-group.scrollarea {
  overflow-y: auto;
}

<!-- language: lang-html -->
<div class="list-group list-group-flush scrollarea">
  <!-- 你的侧边栏内容 -->
</div>

这将使侧边栏可滚动，只要内容溢出，滚动条就会出现。

英文:

I have a page with a sidebar. The sidebar content overflows the page, so I've added overflow-y: hidden and max-height: 100vh to main and overflow-y: auto to the list group to make it scroll but that does not work. The overflowing content is cut off but the scroll bar is not there.

main {
  height: 100vh;
  max-height: 100vh;
  overflow-y: hidden;
}

.scrollarea {
  overflow-y: auto;
}

&lt;html&gt;
&lt;head&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main&gt;
&lt;header class=&quot;col-12 navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow&quot;&gt;
&lt;div class=&quot;navbar-nav ms-auto&quot;&gt;
&lt;div class=&quot;nav-item text-nowrap justify-self-end&quot;&gt;
&lt;a class=&quot;nav-link px-3&quot; href=&quot;#&quot;&gt;Sign out&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;container-fluid d-flex flex-column&quot;&gt;
&lt;div class=&quot;row flex-grow-1&quot;&gt;
&lt;div class=&quot;col-md-4 border-end gx-0 d-flex flex-column flex-shrink-0&quot;&gt;
&lt;div class=&quot;d-flex justify-content-center mt-2 border-bottom&quot;&gt;
&lt;h2&gt;Placeholder&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;list-group list-group-flush scrollarea&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action active&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-8&quot;&gt;
main content
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;

How can I make the sidebar scrollable, preferably using Bootstrap classes?

答案1

得分: 1

以下是您提供的内容的中文翻译：

这里是一个使用flexbox技巧和一些position属性来实现的示例，请注意，这个示例不涵盖小屏幕视图中的响应式布局主题。

使用flex CSS来准备布局结构（头部、侧边栏、主内容）。
然后在可滚动区域上使用position：在relative容器内的absolute框。

希望对您有所帮助，祝您编程愉快！

英文:

Here a sample using flexbox trick with some position property to achieve that, and please do take note that the sample here is not covering the topic of responsive layout in small screen view.

Use flex css to prepare the layout structure (header, sidebar, main content)
Then use position on the scrollable area: an absolute box within a relative container

Hope it helps and Happy coding!

main {
height: 100vh;
}

&lt;html&gt;
&lt;head&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main class=&quot;d-flex flex-column&quot;&gt;
&lt;header class=&quot;col-12 navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow&quot;&gt;
&lt;div class=&quot;navbar-nav ms-auto&quot;&gt;
&lt;div class=&quot;nav-item text-nowrap justify-self-end&quot;&gt;
&lt;a class=&quot;nav-link px-3&quot; href=&quot;#&quot;&gt;Sign out&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;flex-grow-1 container-fluid d-flex flex-column&quot;&gt;
&lt;div class=&quot;row flex-grow-1&quot;&gt;
&lt;div class=&quot;col-md-4 border-end gx-0 d-flex flex-column&quot;&gt;
&lt;div class=&quot;d-flex justify-content-center mt-2 border-bottom&quot;&gt;
&lt;h2&gt;Placeholder&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;flex-grow-1 position-relative&quot;&gt;
&lt;div class=&quot;position-absolute w-100 h-100 overflow-y-auto&quot;&gt;           
&lt;div class=&quot;list-group list-group-flush scrollarea&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action active&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-between&quot;&gt;
&lt;strong&gt;Title&lt;/strong&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;10&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa velit necessitatibus eveniet blanditiis eum maxime odio autem labore omnis repudiandae cumque explicabo nisi suscipit iste rem, a sapiente voluptas incidunt?&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-8&quot;&gt;
main content
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

停止子元素溢出父元素

问题

答案1

CSS Snap Scroll 不允许 jQuery 滚动函数添加或移除类。

为什么 Edge 和 Firefox 中的
标签编号结果不同？

MDN混淆的top属性概念

Team A 和 Team B 导入的类污染了同一个全局命名空间。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论