限制滚动列表视口高度

我有一个字谜编辑布局为限制滚动列表视口高度

_______________________ 
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

限制滚动列表视口高度

回答

相关问题