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重叠。

但我认为我做的方式并不好？

我该怎么做？

先谢谢！

亲切的问候Alex

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结构再次启动它。只需添加填充和一些背景颜色即可。

CSS中包含页眉和页脚的3列（100％）布局的困难

1 个答案: