Question

我正在开发针对uni的Web开发项目，并且我已经修复了始终显示的页眉和页脚标记。但是，结果，网页主体中的文本消失了。我该如何防止这种情况？

包含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

在页脚和标题css中添加：

z-index:999;

Answer 2

这可能不是最好的答案，但我会为页眉和页脚提供一个高度。然后身体将介于溢出自动之间。您可以尝试我的样本，看看它是否与您期望的一样。我添加了颜色只是为了显示部分。

CSS

<style>
    header{
        top: 0;
        left: 0;
        right: 0;
        height:100px;
        position: fixed;
        color:white;
        background-color:#0D47A1;
    }
    #content{
        position:fixed;
        top:100px;
        bottom:100px;
        left:0;
        right:0;
        background-color:#2196F3;
        overflow:auto;
        font-size:12em;
    }
    footer {
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        position: fixed;
        color:white;
        background-color: #0D47A1;
    }
</style>

HTML

<header>
   <div> Header</div>
</header>
<div id="content">

  <div>Stuff</div>
  <div>Stuff</div>
  <div>Stuff</div>
  <div>Stuff</div>
  <div>Stuff</div>
  <div>Stuff</div>
  <div>Stuff</div>
  <div>Stuff</div>

</div>
<footer>
  <div> Footer</div>
</footer>

Answer 3

如果你可以给你的页眉和页脚一个高度，你可以用填充扩展你的身体。由于内容保持不变，因此页眉和页脚将会存在。

示例：

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;
}

如何阻止文本出现在<header>或<footer>下？

3 个答案: