语义 ui 左侧菜单占用过多 space

Question

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

除了语义-ui，我没有其他CSS，而且我没有加载任何Javascript（甚至没有来自语义-ui），因为我使用 React 来管理元素的生命周期。

我正在尝试：

"About" 页面占据了屏幕的橙色部分，还有更多（而不是菜单也占据了橙色部分）。
附在底部的页脚

这是页面的结构（已删除反应数据）：

<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>

Answer 1

编辑来源：

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?

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

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

我的改动：

删除了 div.app-wrapper 和 div.header
已将 class 站点添加到应用程序包装器
将 class .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>

语义 ui 左侧菜单占用过多 space

Semantic ui left menu taking too much space

html

css

semantic-ui