限制滾動列表視口高度

我有一個字謎編輯佈局爲限制滾動列表視口高度

_______________________ 
Top bar 
_______________________ 

........ ___________ 
........ Across Clues 
..Grid.. 
........ 
........ 
      ___________ 
      Down Clues 



_______________________ 
Bottom bar 
_______________________

的跨越和向下的線索都是無序列表，與HTML結構

<div> 
    <label>Across</label> 
    <ul>Clues</ul> 
    <label>Down</label> 
    <ul>Clues</ul> 
</div>

有一個內codepen here帶有精簡版的完整頁面html和足夠的佔位符線索來演示問題。

我希望線索列表的大小介於網格高度（最小值）和頁面高度減去頂部/底部網格（最大值）之間，滾動條出現在兩個列表中，如果它們變得太長。正在發生的事情是，這些列表都顯示了所有的線索，滾動條出現在整個頁面上。

來源

2016-11-29 Martin DeMello

固定在朋友的幫助下;我插入整個骨架以防別人幫忙。將身高設置爲98vh似乎是沒有整頁滾動條的關鍵問題;由於某種原因，100％或100vh都佔用比實際視口更多的空間。

此外，從試驗，內main和周圍的一切還需要任何嵌套的div有height=100%集 - 補充說，因爲我花了一段時間來弄清楚爲什麼加入嵌套級別再次打破滾動行爲。

div { 
 
    border: 1px solid #aaa; 
 
} 
 
html, 
 
body { 
 
    height: 98vh; 
 
} 
 
#main { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-flow: column; 
 
} 
 
.crosspad-statusbar { 
 
    max-height: 10%; 
 
} 
 
.crosspad-main { 
 
    display: flex; 
 
} 
 
.crosspad-grid-container { 
 
    flex: 1; 
 
} 
 
.crosspad-clues-container { 
 
    flex: 2; 
 
    display: flex; 
 
    flex-flow: column; 
 
} 
 
.crosspad-clue-section { 
 
    flex: auto; 
 
    overflow: scroll; 
 
}

<html> 
 

 
<body> 
 
    <div id="main"> 
 
    <div class="crosspad-statusbar"> 
 
     <p>Top bar</p> 
 
    </div> 
 
    <div class="crosspad-main"> 
 
     <div class="crosspad-grid-container"> 
 
     </div> 
 
     <div class="crosspad-clues-container"> 
 
     <p class="title">Across</p> 
 
     <div class="crosspad-clue-section across"> 
 
      <ul class="crosspad-clue-list"> 
 
      <li class="crosspad-clue-current"> 
 
       <div class="crosspad-clue-number">1</div> 
 
       <div class="crosspad-clue-text"></div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <p class="title">Down</p> 
 
     <div class="crosspad-clue-section down"> 
 
      <ul class="crosspad-clue-list"> 
 
      <li class="crosspad-clue-current"> 
 
       <div class="crosspad-clue-number">1</div> 
 
       <div class="crosspad-clue-text"></div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="crosspad-statusbar bottom"> 
 
     <p>Bottom bar</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-12-01 01:01:54

限制滾動列表視口高度

回答

相關問題