Question

尝试使用标题，正文和页脚进行列弹性框，然后在正文中并排显示2个div，它们相对于弹性框的边界（即，不要溢出页脚）。

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

.app {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  flex: 0 1 auto;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}

.body {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  overflow-y: auto;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}

.footer {
  flex: 0 1 40px;
  border-style: solid;
  border-width: 1px;
  border-color: green;
}

.inner {
  position: absolute;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
}

.right {
  margin-left: 225px;
  height: 100%;
}

jsfiddle中的简单测试用例

<div class='app'>
  <div class='header'>
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class='body'>
    <div class='inner'>

      <div class='left'>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
        <p>test 1</p>
      </div>
      <div class='right'>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
        <p>test 2</p>
      </div>
    </div>

  </div>
  <div class='footer'>
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

https://jsfiddle.net/XJ45G19/9e7vjykv/

知道我哪里出错了吗？提前致谢！

Answer 1

中间.body元素没有溢出，因为内容已经绝对定位，从而将其从正常流中移除。

从position: absolute移除.inner后，内容占用空间，.body上会弹出垂直滚动条。

Answer 2

按要求发布每个请求：

从position: absolute删除.inner。

柔性流动柱，并排在体内

2 个答案: