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

我正在尝试使用 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/

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

上一篇：html - 响应式设计 - 列不在 Div 标签内

下一篇：html - 同级 Flexbox 元素/列中的行高相等