Question

我正在尝试使用看起来像这样的UI：

在图像中假装顶部栏“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元素内的同时，它似乎可以正常工作。

更新刚刚看到您明确不想在按钮上使用固定位置。如果可以找到其他解决方案，则可以编辑此响应，但是对于单个按钮，应该可以解决问题。

列flexbox适合另一列flexbox

1 个答案: