較大尺寸屏幕上的Flexbox粘性頁腳高度問題

我使用flexbox製作的粘性頁腳存在問題。它在分辨率高達1366 * 768的情況下效果很好，但在1600 * 1300像素的情況下，即使內容很少，頁腳也會被推到可見屏幕的底部。較大尺寸屏幕上的Flexbox粘性頁腳高度問題

這裏是我使用的HTML結構。

body , html { 
    height: 100%; 
} 

#main { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

#content { 
    flex: 1; 
} 





<body> 
     <div class="ui secondary pointing menu"> 
      <a class="active item"><img src="/assets/images/ti.jpg" class="image ui small"></a> 
      <div class="right menu"><a class="ui item">Logout</a></div> 
     </div> 
     <div id="main"> 
      <div id="content" class="ui container"> 
       <div id="pie-menu" style="position: relative;"> 
        <div class="DVSL-resize-triggers"> 
         <div class="DVSL-expand-trigger"> 
          <div style="width: 1128px; height: 501px;"></div> 
         </div> 
         <div class="DVSL-contract-trigger"></div> 
        </div> 
        <!--ZoomCharts 1.11.7--> 
        <div> 
         <div class="DVSL-background-container" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"> 
          <div class="DVSL-background" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"> 
           <div class="DVSL-background-image DVSL-PC-background-image" style="bottom: 0px; top: 92px; left: 405px; width: 317px; height: 317px; background-image: url(http://86.47.106.22:8080/assets/images/DublinPortCo.jpg);"></div> 
          </div> 
         </div> 
         <canvas class="DVSL-canvas" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 1127px; height: 500px;" width="1127" height="500"></canvas> 
         <div class="DVSL-border" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></div> 
         <div class="DVSL-interaction" tabindex="0" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default;"> 
          <div class="DVSL-resizer" style="width: 1127px; left: 0px;"></div> 
          <div class="DVSL-info-left" style="position: absolute; display: none; left: 752px; top: 256px;"><b>Owl</b></div> 
         </div> 
         <div class="DVSL-menu-container DVSL-menu-workaround" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default;"><span class="DVSL-empty"> </span></div> 
        </div> 
       </div> 
      </div> 
      <div class="ui inverted vertical footer segment"> 
       <div class="ui container"> 
        <div class="ui grid"> 
         <div class="twelve wide column">Thermtec 2016. All Rights Reserved</div> 
         <div class="three wide column"><img src="/assets/images/logoenigma.png" class="image ui small"></div> 
        </div> 
       </div> 
      </div> 
     </div>  
    </body>

該網站在http://86.47.106.22:8080/是可見

來源

2016-02-08 Bazinga777

是個e答案有幫助嗎？ – Aziz

你的報頭（ui secondary pointing menu）正在一些空間而#main DIV是檢視區的100％，從而變爲[頭高度] + [視口高度] =頁腳推下來

你可以嘗試讓視和內容的頭10％90％的視口，以確保一致性

.ui.secondary.menu { 
    ... 
    height: 10%; 
    box-sizing: border-box; 
    margin-bottom: 0; 
} 

#main { 
    display: flex; 
    flex-direction: column; 
    height: 90%; 
}

來源

2016-02-08 08:19:45 Aziz

較大尺寸屏幕上的Flexbox粘性頁腳高度問題

回答

相關問題