css - 列 flexbox 适合另一列 flexbox

Question

我正在尝试获得一个看起来有点像这样的用户界面:

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

到目前为止，我的 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

Answer 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 内时似乎可以工作元素。

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