Question

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

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

我想要：

＆＃34;关于＆＃34;占据屏幕橙色部分的页面，以及更多（而不是菜单占用橙色部分）。
一个贴在底部的页脚

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

＆＃13;

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

＆＃13;

Answer 1

修改来源：

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

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

我的更改：

在div.app-wrapper和div.header
将类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>

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

1 个答案: