列 flexbox 适合另一个列 flexbox答案

【问题标题】：Column flexbox fitting within another column flexbox列 flexbox 适合另一个列 flexbox
【发布时间】：2019-06-07 00:07:26
【问题描述】：

我正在尝试获得一个看起来像这样的 UI：

在图片中，假装带有“纽约...”的顶部栏和“预订”按钮是固定的，并且它们之间的内容是可滚动的。

我目前的 HTML 是这样的（请注意，.button 和 .form 只是 div，以使示例尽可能简单）

  <div class="wrapper">
    <div class="sidebar"> <!-- Hidden from UI unless you swipe left to right --> </div>
    <div class="inner-wrapper">
      <div class="header">Title here</div>
      <div class="balance-bar">$0</div>
      <div class="app-content">
        <div class="body-content">
          <div class="form">
            <input type="text"><br><br>
            <input type="text"><br><br>
            <input type="text"><br><br>
            <input type="text"><br><br>
            <input type="text"><br><br>
            <input type="text"><br><br>
            <input type="text"><br><br>
            <input type="text"><br><br>
            <input type="text"><br><br>
          </div>
          <div class="button">Submit</div>
        </div>
      </div>
    </div>
  </div>

CSS 是：

.button, input {
  width:100%;
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid blue;
  height:200px;
  overflow: auto;
}
.header {
  background: lightblue;
  flex-shrink: 0;
}
.balance-bar {
  background: lightgreen;
  flex-shrink: 0;
}
.inner-wrapper {
  border: 2px solid red;
  display: flex;
  flex-direction: column;
}
.app-content {
  border: 2px solid green;
  overflow:auto;
}
.body-content {
  border: 2px solid orange;
  display: flex;
  flex-direction:column;
}
.form {
}
.button {
  background: pink;
  flex-shrink: 0;
}

如果我将按钮移出表单并作为第一个 flexbox 的子项（因此 .button 将是 .app-content 的兄弟），这一切都很好，您甚至不需要在 flexbox 中使用 flexbox。一个 flexbox 可以完美运行。问题是语义都是错误的，你没有内置浏览器功能，比如输入提交，而且 JS 让它工作的流程非常糟糕。

我希望使用 flexbox 可以将包装器设置为窗口的高度，并且 flexbox 只会计算所有子级以适应窗口（确实如此，但不适用于设置为 flex 的子级）

http://jsbin.com/gumozexihi/1/edit?html,css,output

【问题讨论】：

你不能只使用position: fixed;作为标题和按钮并将它们准确地放在你需要的地方吗？
Fixed 不起作用的原因有很多，但一个原因是可能有多个按钮，或者任何这些“固定”元素的高度可能会改变，而你永远不会真正知道顶部和底部需要多少填充

标签： css layout flexbox

【解决方案1】：

我希望这会有所帮助。我将button 保留在form 中，并给它一个position: fixed 和一个bottom: 0。

HTML：

<div class="wrapper">
  <div class="inner-wrapper">
    <div class="header">Header</div>
    <div class="balance-bar">$0</div>
    <div class="app-content">
      <div class="body-content">
        <div class="form">
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <div class="button">Submit</div>
        </div>
      </div>
    </div>
  </div>
</div>

还有 CSS：

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  height: 100%;
}

.inner-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1;
  overflow: auto;
}

.body-content {
  height: 1000px;
  display: flex;
  flex-direction: column;
}

.button {
  position: fixed;
  bottom: 0;
  width: 100%;
}

我将height: 1000px 添加到.body-content 以模拟具有比可用屏幕高度更多的内容。我使用position: fixed 和bottom: 0 将按钮固定在底部，这可能不是理想的解决方案，但它似乎可以在将按钮保留在form 元素内时工作。

更新刚刚看到您特别不想在按钮上使用固定位置。如果我能找到另一个解决方案，我将编辑此响应，但对于单个按钮，这应该可以解决问题。

【讨论】：