javascript - 语义 ui 边栏问题-6ren

javascript - 语义 ui 边栏问题

转载作者：行者123 更新时间：2023-11-28 06:01:13

我希望plnkr snippet说明了我的问题。

当您运行它并单击菜单时，边栏将展开。没关系。我遇到的问题是，当您滚动内容时，侧边栏没有设置它的高度来填充空间。我试过更改侧边栏上的 css 属性，但没有任何乐趣。我缺少技巧，需要一些帮助。

我仍在摸索语义，并从语义网站借用了片段。虽然我添加了很多 <p>生成额外内容的标签。

谢谢

        $(function() {
          $('.ui.sidebar')
            .sidebar({
              context: '.bottom.attached'
            })
            .sidebar('attach events', '.menu .item');
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>React prototype</title>
    <link href="../node_modules/semantic-ui/dist/semantic.css" rel="stylesheet" />
    <link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
    <div class="ui top attached demo menu">
        <a class="item">
            <i class="sidebar icon"></i>
            Menu
        </a>
    </div>
    <div class="ui bottom attached pushable segment">
        <div class="ui inverted labeled icon left inline vertical sidebar menu uncover">
            <a class="item">
                <i class="home icon"></i>
                Home
            </a>
            <a class="item">
                <i class="block layout icon"></i>
                Topics
            </a>
            <a class="item">
                <i class="smile icon"></i>
                Friends
            </a>
            <a class="item">
                <i class="calendar icon"></i>
                History
            </a>
        </div>
        <div class="pusher">
            <div class="ui basic segment">
                <h3 class="ui header">Application Content</h3>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>

<!-- begin snippet: js hide: false -->

                <p>sksksksksks</p>
                <p>sksksksksks</p>
            </div>
        </div>
    </div>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/semantic-ui/dist/semantic.js"></script>
    <script>
        $(function () {
            $('.ui.sidebar')
                          .sidebar({ context: '.bottom.attached' })
                          .sidebar('attach events', '.menu .item');
        })
    </script>
</body>
</html>

最佳答案

这是由于 height:100%来自 pushable <div class="ui bottom attached pushable segment"> 中的 CSS 类.我不确定这是一个优雅的解决方案...无论如何，作为解决方法，您可以设置 height这个 DOM 准备就绪的元素(我不检查是否有任何副作用)。所以在你的脚本中添加:

$(document).ready(function(){
  $('.pushable').css('height', 'auto');
})

查看修改后的 fiddle here

希望对你有帮助

关于javascript - 语义 ui 边栏问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36738728/

文章推荐： ios - UIDatePicker 不遵守夏令时

文章推荐： ios - 多个导航标题文本 - swift

文章推荐： swift - 创建 NSPredicate 实例时访问错误

html - 边栏 - 文本与栏重叠
这个左侧边栏文本使栏本应位于的位置令人震惊。需要帮助将文本放置在隔间 (li) 内而不重叠。只需要调整一下。我已经有了 font-size %，但仍然无法正常工作。谢谢! .menuleft {
javascript - 谷歌地图 API 边栏
我以这种方式添加标记和侧边栏: //' + name + ''; return marker; } // This function picks u
javascript - 关闭推送内容的 Canvas 边栏？
是否可以让侧边导航菜单从左侧过渡，同时推送其他内容以及不透明的颜色叠加层？我尝试在桌面浏览器中完美运行的版本，但当我切换到移动设备时，边栏会扩展页面的高度并且页面失去流动性。示例:已更新 http
javascript - 语义 UI 边栏，部分高度
全部! 我写这篇文章是因为我试图弄清楚我将如何处理以下内容: 我想编写一个应用程序(特别是 Electron + Vue)，它使用窗口左侧的语义 UI 侧边栏提供导航和其他功能。问题是，我只想让侧边
html - 如何为较小的屏幕自动折叠 Bootstrap 4 边栏？
这是我当前的代码，我已经设法用折叠按钮隐藏侧边栏，但我希望它只在小型设备上折叠，就像引导导航栏那样。 PROFILE
html - CSS - Flex 边栏 - 页面的全高 - Weebly
我一直在 Weebly 网站上工作:https://testerbuyer.weebly.com/ 问题出在左侧的侧边栏菜单上。如果侧边栏菜单只有几个菜单项，侧边栏会覆盖页面的整个高度并粘在页面上。
css - 谷歌自定义搜索 Wordpress 边栏 CSS 样式被压扁
嗨聪明的 CSS 大师等我刚刚将 Google 自定义搜索小部件添加到我的 wordpress 网站我对样式有疑问吗？它应该像这个侧边栏一样出现 - http://googlecustomsear
java - Eclipse IDE 边栏(导航)缺失
我正在尝试将 Eclipse 用于我的计算机科学类(class)，但左侧的栏不见了。有谁知道修复？最佳答案你是说包浏览器吗？您可以在这里切换关于java - Eclipse IDE 边栏(导航)
swift - 由于不推荐使用 LSSharedFileList，是否可以添加到 Finder 边栏？
希望将文件夹添加到 Finder 的侧边栏收藏夹中，但对于现代 macOS，似乎所有途径都已完全弃用。所有 LSSharedFileList* 现在都无法使用，根据 sdef/System/Libra
html - 使用语义 UI 边栏 react 组件制作全尺寸主要内容
我正在尝试使用语义 Ui 组件制作一个具有反应的 Web 应用程序。但是，我真的很难让主要内容组件占据整个屏幕(见图)。我希望主要内容组件填满其余空间，但它似乎只占用了它需要的空间。最终我希望能够让侧
html - 边栏( float : left) not always floating left
我目前制作了一个包含侧边栏和内容的容器，但是当我向侧边栏添加的文本多于向容器添加的文本时，第二个侧边栏会稍微 float 到一边。这些是我正在使用的代码。 HTML: Pl
html - 我的 Internet 浏览器每次都会自动打开和关闭 HTML 边栏。我怎样才能阻止它发生了什么？
每当我打开任何 Internet 浏览器时，在右侧会自动打开一个侧页，占确切页面的一半，它有一些 HTML 代码。它一次又一次地打开和关闭它自己。这是为什么？如何阻止它？请帮助我。最佳答案我相信这
php - 边栏 Google Maps API v3 使用 PHP/MYSQL 提取数据
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 语义 ui 边栏问题