语义 UI 边栏高度大于视口大小

Question

JSFiddle 示例：https://jsfiddle.net/eqf8wwxe/

我正在尝试使用带页脚的语义 UI 边栏。但是，页面的高度不能比视口高出页脚的高度。

我该如何纠正这个问题？在这种情况下是什么原因造成的？

$('.ui.sidebar').sidebar({
 context: $('#main-sidebar-segment')
})

    * {
  border-radius: 0!important;
 }
 
 body {
  background: #f1f1f1;
  //background: #8b8b8b;
  //display: flex;
  //flex-flow: column;
  height: 100%;
 }

 #main-sidebar-segment {
  //display: flex;
  //flex-flow: column;
    }

 .ui.main.container {
  //flex: 1 1 auto;
 }
 
 .ui.inverted.footer.segment {
  //flex: 0 1 40px;
  margin: 0;
  z-index: 1000;
 }
 
 .ui.grid {
  //margin: 1rem;
 }
 
 .ui.inverted.green.dashboard.segment {
  background-color: #2fb34e!important;
  color: #FFF!important;
 }
 
 .ui.inverted.orange.dashboard.segment {
  background-color: #f26b1c!important;
 }
 
 .ui.stat.header.segment {
  padding: 0.5em;
 }
 
 .ui.inverted.dark.blue.segment {
  border: 2px solid #2185D0;
  background-color: #4c4f52!important;
 }
 
 .ui.ordered.large.list .list>.item:before,
 .ui.ordered.large.list > .item::before {
  font-size: 1.3em;
  content: counters(ordered, " ") ". ";
 }
 
 .ui.ordered.large.list .content {
  margin-left: 0.3em;
 }
 
 .ui.secondary.blue.filled.segment {
  background: linear-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .2) 100%) #4c4f52;
  background-color: #2185D0!important;
 }
 
 .black.header {
  color: black;
 }
 
 h3.compact.header {
  margin: 0 !important;
 }
 
 .ui.inverted.sidebar {
  background: #37393a;
  //margin-top: 40px !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<body >
 <div id="main-sidebar-segment" style="margin-bottom: 0; border: none;" class="ui bottom attached segment pushable">
      
  <div class="ui left visible inline vertical inverted thin sidebar labeled menu">
   <a class="item">
    <i class="home icon"></i> Home
   </a>
   <a class="item">
       <i class="bar chart icon"></i>Reports
   </a>
   <a class="item">
       <i class="ordered list icon"></i>Leaderboards
   </a>
   <a class="item">
       <i class="configure icon"></i>Tools
   </a>            
  </div>
   <div class="ui inverted fluid fixed menu">
  <div class="ui container">
   <a class="active item"><i class="home icon"></i>Home</a>
   <div class="compact right menu">
    <div class="ui dropdown item">
     <div class="default text">Select World</div>
     <input type="hidden" value="">
     <i class="dropdown icon"></i>
     <div class="menu">
      <div class="item" data-value="1">World 1</div>
      <div class="item" data-value="2">World 2</div>
      <div class="item" data-value="3">World 3</div>
     </div>
    </div>
    <a class="icon item"><i class="options icon"></i></a>
    <a class="item"><i class="orange sign out icon"></i>Logout</a>

   </div>
  </div>
 </div>        
  <div class="pusher">
  </div>

  <div class="ui inverted footer segment">
  <div class="ui center aligned container">
   <div class="ui horizontal inverted small divided link list">
    <a class="item" href="#">Report An Issue</a>
    <a class="item" href="#">Chat</a>
    <a class="item" href="#">Contact</a>
   </div>
   <div>
    Created and maintained by
    <a class="teal link" href="#">
     <h5 style="display:inline;" class="ui teal header">
      Douglas Gaskell
     </h5>
    </a>
   </div>

  </div>
 </div>       
 </div>
</body>

Answer 1

.pusher 有一个 min-height: 100%，这是将页脚推出视口的罪魁祸首。

我会覆盖那个样式（或者如果你在别处使用 .pusher class 为它创建一个新的 css class。）

#main-sidebar-segment .pusher {
  min-height: calc(100vh - 80px);
}

我选择 80px，因为那是你的页脚的高度。

https://jsfiddle.net/8yobm8u3/

语义 UI 边栏高度大于视口大小

Semantic UI Sidebar height is larger than viewport size

css

semantic-ui