CSS 中带有页眉和页脚的 3 列（100%）布局的困难

Question

我正在制作一个将在整个网站周围使用“自定义”边框的主页。

这就是我想用我的 div 实现的目标。

[LEFT-TOP-BORDER   ][MIDLLE-TOP-BORDER   ][RIGHT-TOP-BORDER   ]
[LEFT-MIDDLE-BORDER][Content             ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]

• 所有边框角（左/右上边框和下边框）都有固定的宽度和高度。
• 中间顶部/底部边框具有固定高度，但应扩展到 网站的整个宽度。
• 中间的左右边框有一个固定的宽度，但应该填满 即使内容变大，也会占据整个屏幕高度。
• 边框应该远离内容 div，所以如果窗口是 小到不应该放在内容 div 上。
• 内容 div 将具有固定的宽度和高度。
• 我希望页脚具有粘性，而不会再次与内容重叠 div 窗口太小时。

希望清楚我想要做什么！

我几乎让它工作，但我遇到了左/右中边框的问题。亲自查看here

正如您所看到的，当窗口变小时，边框会与内容 div 重叠。

但我觉得我做的方式不好？

我该怎么做？

提前致谢！

亲切的问候亚历克斯

Answer 1

查看您的代码，您需要做的是将您的 div 放在彼此内部，而不是彼此相邻。所以你的中间部分将是：

<div class="middle-left">
    <div class="middle-right">
        <div class="middle-content">
            Content
        </div>
    </div>
</div>

然后给你的左中左填充正确宽度并将背景定位在左边，中右一些正确宽度的右填充并将背景定位在右边，然后随着你的内容变高，边距 div 会自动扩展。

对所有三层都执行此操作，如下所示：

<div class="wrapper">
    <div class="top-left">
        <div class="top-right">
            <div class="top-content">
            </div>
        </div>
    </div>
    <div class="middle-left">
        <div class="middle-right">
            <div class="middle-content">
                 Content
            </div>
        </div>
    </div>
    <div class="bottom-left">
        <div class="bottom-right">
            <div class="bottom-content">
            </div>
        </div>
    </div>
</div>

现在你的 CSS 中不需要 100% 的身体高度。包装器可以居中，也不需要高度。我会尝试真正摆脱你所有的 CSS，并用这个新的 HTML 结构重新开始。只需添加填充和一些背景颜色即可。