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

我正在尝试使用语义UI创建仪表板结构。

除了语义UI，我没有别的CSS，并且我不加载任何Javascript（甚至从语义UI中也没有加载），因为我使用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>

最佳答案

编辑源：

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之间的两个无类的闲置包装器div
将类Site添加到app-wrapper
将类.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>