html - 语义 ui 左菜单占用太多空间-6ren

html - 语义 ui 左菜单占用太多空间

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

26

4

我正在尝试使用 semantic-ui 制作仪表板结构。

除了 semantic-ui，我没有其他 CSS，而且我没有加载任何 Javascript(甚至没有从 semantic-ui)，因为我使用 react 来管理元素的生命周期。

我正在尝试:

“关于”页面占据了屏幕的橙色部分，等等(而不是菜单也占据了橙色部分)。
固定在底部的页脚

这是页面的结构(已删除 react 数据):

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
    <div class="app-wrapper" id="app">
       <div>
          <div>
             <div id="header">
                <div class="header page">
                   <div class="container ui">
                      <div href="#" class="floated icon menu right text ui">User</div>
                      <div class="menu text ui">
                         <a href="geodb.io/home" class="icon item"><i class="emphasized github huge icon mark"></i></a>
                         <a class="item">
                            <div class="input labeled small ui user">
                               <div class="label ui">This project</div>
                               <input type="text" placeholder="search">
                            </div>
                         </a>
                         <a href="#" class="item">Home</a>
                      </div>
                   </div>
                </div>
             </div>
             <div id="menu">
                <div class="menu pointing secondary ui vertical">
                   <div><a href="/" class="item">index</a><a href="/faq" class="item">faq</a><a href="/about" class="item active">about</a></div>
                </div>
             </div>
             <div class="container content main text ui">
                <div class="dividing header ui">about</div>
                <div id="view">
                   <div>About page</div>
                </div>
             </div>
             <div id="footer">
                <div class="footer">
                   <div class="divider section ui"></div>
                   <div class="container ui">
                      <div class="disabled item">Copyright</div>
                      <i class="github icon large mark"></i>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>

最佳答案

编辑来源:

好吧，所以我做了一些测试并找到了这个。

我假设您的代码示例是 <body> 的直接子代标记，

我的改变:

删除了 div.app-wrapper 之间的两个无类、无用的包装 div。和 div.header
将 Site 类添加到应用程序包装器
将类 .site-content 添加到 .container.content.main

如果将这两个保留在原位，页脚就不会粘在底部。这是此代码的 CSS

.Site {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }

    .Site-content {
        flex: 1;
    }

    #footer {
        background-color: #333;
        width: 100%;
        bottom: 0;
        position: relative;
    }

这就是它在我本地环境中的工作方式。

感谢反馈

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.Site-content {
  flex: 1;
}
#footer {
  background-color: #333;
  width: 100%;
  bottom: 0;
  position: relative;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<div class="app-wrapper Site" id="app">
  <div id="header">
    <div class="header page">
      <div class="container ui">
        <div href="#" class="floated icon menu right text ui">User</div>
        <div class="menu text ui">
          <a href="geodb.io/home" class="icon item"><i
                                class="emphasized github huge icon mark"></i></a>
          <a class="item">
            <div class="input labeled small ui user">
              <div class="label ui">This project</div>
              <input type="text" placeholder="search">
            </div>
          </a>
          <a href="#" class="item">Home</a>
        </div>
      </div>
    </div>
  </div>
  <div id="menu">
    <div class="menu pointing secondary ui vertical">
      <div><a href="/" class="item">index</a><a href="/faq" class="item">faq</a><a href="/about" class="item active">about</a>
      </div>
    </div>
  </div>
  <div class="container content main text ui Site-content">
    <div class="dividing header ui">about</div>
    <div id="view">
      <div>About page</div>
    </div>
  </div>
  <div id="footer">
    <div class="footer">
      <div class="divider section ui"></div>
      <div class="container ui">
        <div class="disabled item">Copyright</div>
        <i class="github icon large mark"></i>
      </div>
    </div>
  </div>
</div>

关于html - 语义 ui 左菜单占用太多空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35165821/

26

4

0

文章推荐： javascript - 相对容器中绝对定位的图像不随容器移动

文章推荐： css - div 的 li 中间并删除阴影顶部

文章推荐： javascript - 如何在html/css中制作下拉登录菜单

Tomcat 用完了 PermGen 空间，即使保留了很多 PermGen 空间
运行 Tomcat 失败并出现 java.lang.OutOfMemoryError - 与缺少 PermGen 空间相关的错误。我最近将 Tomcat 更改为以自己的用户(而非 root)运行。
空间+时间参数的Postgresql复合索引
我们有一个表，其中包含数百万行，其中包含 PostGIS 几何图形。我们要执行的查询是:落在边界几何内的最新条目是什么？这个查询的问题是我们经常会有大量的项目匹配边界框(半径大约为 5 公里)，然后
php - Elasticsearch 空间
我有一个Elasticsearch设置，它将允许用户搜索通配符作为索引。 array:3 [ "index" => "users" "type" => "user" "body" => arra
表格中按钮之间的 HTML 空间
我创建了一个表，其中每行包含两个按钮，并且两个按钮连接在一起，我想将两个按钮分开。我用过不起作用，css 也是，这是他们的另一种方式。我有另一个问题，因为我不想在表格边框内显示操作按钮，而是在靠近
按钮之间的 CSS 空间
我试图在 jQuery Mobile 中的两个按钮之间留出空白。现实中的布局是这样的: Button 1 Button 2 (Hidden w/ display: none)
函数后的 JavaScript 空间
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
android - 如何使用图表引擎减少条形图和图表图例之间的间隙/空间？
您好，我对图表应用程序还很陌生。现在我为我的应用程序创建了条形图。当我运行 create bar chart as separate project 时，输出如下所示。然后当我将条形图与我的应用程序
hibernate 空间 : can't find function
我在使用 H2 和 GeoDB(内存中，junit)时遇到问题。另外，使用 Hibernate 5(每个包的最新版本，包括 hibernate-spatial)和 Spring 4。通过 id 实
r - 映射澳大利亚城市 - R 空间
我想画一张澳大利亚的 map ，并将每个城市表示为一个点。然后突出显示人口众多(> 1M)的城市 library(sp) library(maps) data(canada.cities) head
Cassandra:备份整个 key 空间
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 提供事实和引用来回答它. 6年前关闭。 Improve this
delphi - Memo1.Loadfromfile()空间
如何保持.txt文件中存在的空格？在.txt文件中，它表示： text :text text1 :text1 text23 :text2 text345 :text3 如果我写这段
passwords - 如何计算密码的 key 空间？
以下哪个键最大？选项 1:16 个数字 [0,9] 选项 2:30 个元音选项 3:字母表中的 16 个字母选项 4:32 位有人可以帮助我，告诉我哪一个是正确的答案以及我们如何计算它吗？我知
android - Azure 空间 anchor
在 Unity 3d 中使用 Azure 空间 anchor 来实现在 iOS 和 Android 上部署的室内和室外增强现实体验是否有益？最佳答案是的，对于 Azure Spatial Anch
javascript - 调整大小的图像占用太多 UI 空间
我有一个绝对定位的圆形图像。图像只需占据屏幕宽度的 17%，并且距离顶部 5 个像素。问题是，当我调整图像大小以占据屏幕宽度的 17% 时，它会这样做，但同时容器会变长。图像本身不会拉伸(stret
cassandra - 使用nodetool备份cassandra key 空间
我在 Ubuntu 14.04 上使用 Cassandra。从文档中，我可以看到运行命令: nodetool snapshot 创建我的 key 空间的快照。命令的输出是: nodetool sn
Heroku 将应用程序迁移到私有(private)空间
Heroku引入了“私有(private)空间”，是否可以将现有应用迁移到私有(private)空间？ https://blog.heroku.com/archives/2015/9/10/herok
mediawiki - 在语义记录中设置非绑定(bind)空间
是否允许在语义记录中使用非绑定(bind)空格或其他 HTML 编码字符？我遇到的问题是 ; 字符被软件视为记录的结尾。例如:假设我有一份婚姻记录，其中包含 2 个结婚者的姓氏、结婚年份以及结
python - 自动泊车位检测-如何使用OpenCV和Python初始化泊车位图/空间
我正在研究“智能 parking ”项目，偶然发现了包含我们真正需要的YouTube视频。我们已经实现了第一部分，即从视频源进行实时透视变换，下一步是将其定义为一组矩形我基本上需要知道他是如何做到的
java - 如何为两个类创建共享 ID 空间？
我有两个类:Engine 和 Trainset(多个单元)，这两个类共享其 ID 空间，其中包含名称和系列 id=- . 这是我的Engine类(它是抽象的，因为有引擎的子类型(DieselEngin
java - 分割字符串 Java 空间
如果有人能帮助我，那就太好了。我正在尝试使用Java的Split命令，使用空格分割字符串，但问题是，字符串可能没有空格，这意味着它将只是一个简单的顺序(而不是“输入2”将是“退出”) Scanner

首页

博学

6Ren·AI

商城

html - 语义 ui 左菜单占用太多空间