css - 如何在 css 中实现画布设计模式？

Question

不确定三列布局是否是正确的术语，但这就是我想要做的。

我想要一个“中间”元素来填充所有可用空间（如果可能没有滚动条）。“停靠”在左右两侧，应该各有一个元素，显示带有中间元素工具的列表。

基本上，我正在描述 Jenifer Tidwell 的 Designing Interfaces 中的 Canvas 设计模式。

Answer 1

三列布局（不一定）与画布模式相同：

这是html：

<div class="canvas-pattern">
    <div class="canvas-pattern-left"></div>
    <div class="canvas-pattern-canvas"></div>
    <div class="canvas-pattern-right"></div>
</div>

和CSS：

/* canvas-pattern */
/** full screen */
.canvas-pattern-canvas{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -10;
    background-color: lightblue;
}

/*** centered within fullscreen */
.canvas-pattern-canvas > div {
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
}

/** docking left and right */
.canvas-pattern{
    position: relative;
}

.canvas-pattern-right{
    position: absolute;
    top: 0;
    right: 0;
}

.canvas-pattern-left{
    position: absolute:
    top: 0;
    left: 0;
}