html - 如何停止在 <header> 或 <footer> 下显示文本？

Question

我正在为 uni 开发一个 Web 开发元素，并且我有 Header 和 Footer 标记，这些标记固定为始终显示。然而，结果，网页主体中的文本在它们下面消失了。我将如何防止这种情况发生？

包含 CSS 以供引用。

header{
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    background-color: #d3d3d3;
    width: 100%;
}

footer {
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    background-color: #d3d3d3;
    width: 100%;
}

谢谢大家!

Answer 1

如果可以为页眉和页脚指定高度，则可以使用内边距扩展主体。由于内容保留在原位，因此您的页眉和页脚将有位置。

例子:

body{
padding-top: 100px;
padding-bottom: 100px;
overflow-x: hidden;
}

header{
top: 0;
left: 0;
right: 0;
position: fixed;
background-color: #d3d3d3;
width: 100%;
height: 100px;
}

footer {
bottom: 0;
left: 0;
right: 0;
position: fixed;
background-color: #d3d3d3;
width: 100%;
height: 100px;
}