Question

我有一个填字游戏编辑器

_______________________
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的精简版本以及足够的占位符线索来证明问题。

我希望在网格高度（最小值）和页面高度减去顶部/底部条形图（最大值）之间调整大小的线索列表，如果它们太长，滚动条会出现在两个列表中。发生的事情是列表都显示所有线索，整个页面上都出现一个滚动条。

Answer 1

在朋友的帮助下修复;我正在插入整个骨架，以防它帮助其他人。将身高设置为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>

将可滚动列表限制在视口高度内

1 个答案: