Question

我正在尝试构建一个导航面板，该导航面板的顶部具有固定高度的主导航栏，固定至屏幕底部的具有固定高度的辅助导航栏，并且在其之间填充剩余空间的容器是可以滚动，具体取决于其中的项目列表的长度。

我正在学习使用flexbox，并认为我可以使用flex-grow和溢出：隐藏以完成此操作，但是我遇到了一些麻烦。

html,
body {
  height: 100%;
}

.container-main {
  display: flex;
  height: 100%;
  flex-flow: column;
}

.nav-bar {
  display: flex;
  height: 36px;
  background-color: grey;
}

.container-dd {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.dd-fill {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  background-color: green;
  overflow: hidden;
}

.dd-bot {
  display: flex;
  height: 100px;
}

<div class="container-main">
  <div class="nav-bar">top nav bar</div>
  <div class="container-dd">
    <div class="dd-fill">
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
    </div>
    <div class="dd-bot">sticky footer</div>
  </div>
</div>

从小提琴中可以看到，div dd-fill中不适合的内容无法访问，并且没有滚动条。同样，辅助导航栏的固定高度也没有强制执行。有人知道为什么它会这样吗？预先感谢。

Answer 1

您可以通过将hidden更改为auto并使用min-height（有时我也添加max-height以确保它不会在更大的屏幕上显示）来解决溢出问题，而不是使用顶部和底部的高度：

html,
body {
  height: 100%;
  margin: 0;
}

.container-main {
  display: flex;
  height: 100%;
  flex-flow: column;
}

.nav-bar {
  display: flex;
  min-height: 36px;         /* use min-height */
  background-color: grey;
}

.container-dd {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.dd-fill {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  background-color: green;
  overflow: auto;            /* use auto so scrollbar appears */
}

.dd-bot {
  display: flex;
  min-height: 100px;       /* use min-height */
}

<div class="container-main">
  <div class="nav-bar">top nav bar</div>
  <div class="container-dd">
    <div class="dd-fill">
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
    </div>
    <div class="dd-bot">sticky footer</div>
  </div>
</div>

Answer 2

问题是您为{ //... plugins: [ new webpack.DefinePlugin({ 'MY_GLOBAL_VARIABLE': JSON.stringify(process.env.MY_GLOBAL_VARIABLE) }) ] //... }设置了100％的固定高度，并且为overflow: hidden设置了.container-dd

.conrtainer-dd {
   height: 100%;
   overflow: hidden;
}

100％的固定高度阻止.container-dd扩展以合并所有其他内容，并且overflow: hidden阻止滚动条出现。更改您的样式。

.container-dd {
   ...
   height: auto;
   min-height: 100%;
   overflow: auto;
   ...
}

还可以。

.dd-fill {
   height: auto;
   overflow: hidden;
}

溢出：隐藏在Flexbox中无法正常使用

2 个答案: