html - 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]

• 所有边框 Angular (左/右顶部和底部边框)具有固定的宽度和高度。
• middle-top/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>

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