Question

以下布局

-----
  A
-----
WHITE
WHITE
WHITE
-----
  B
-----

为了实现这种布局，我可以使用

position: absolute;
top/bottom: 0;

工作正常，问题是，元素A可以成长。所以使用position: static它应该如何应用：元素B可以增长，如果不是所有它都可以显示，则div会进行一些滚动，而元素A仍然可以被视为滚动的一部分。

当我应用我的CSS规则时，元素B增长直到元素A被B覆盖.Z-Index在这里没有帮助，所以我非常想要position: static的标准行为。

还有其他方法吗？我想到的是一个中间的白色元素，随着B的增长而不断缩小。

Answer 1

这是你想要的吗？ http://jsfiddle.net/xr1as8hh/

<强> HTML：

<div class="container">
    <div class="top">
        <div class="element">A</div>
        <div>White<br/>White<br/>White</div>
    </div>
    <div class="bottom">B</div>
</div>

<强> CSS：

.container {
    height: 200px;
    display: flex;
    flex-direction: column;
}
    .top {
        border: 1px solid red;
        flex: 1;
        overflow: auto;
    }
        .element {
            padding-bottom: 200px;
        }

    .bottom {
        border: 1px solid blue;
    }

粘贴元素A到顶部，B到底部没有位置：绝对

1 个答案: