内容越过我的标题,但不是页脚?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了内容越过我的标题,但不是页脚?相关的知识,希望对你有一定的参考价值。

由于某种原因,我在.box中的内容超出了我的标题,但是当你调整窗口大小时,我的内容不是我的页脚。我试图使页脚/标题固定,因此当调整窗口大小时,它们不会移动并且内容会覆盖它们。但就像我说它只适用于页脚,标题允许内容覆盖它。所以我想知道我该怎么做才能解决这个问题?谢谢。

body {
  background-color: #323232;
  font-family: Lato;
  padding: 0;
  margin: 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 25px;
  display: inline-block;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.fixed-header, .fixed-footer {
  width: 100%;
  position: fixed;
  background: #333;
  padding: 10px 0;
  color: #fff;
  text-align: center;
}

.fixed-header{
  top: 0;
}

.fixed-footer{
  bottom: 0;
}

.box {
  background: #FFFFFF;
  padding: 10px;
  width: 400px;
  height: 600px;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>

<html lang="en">

 <head>
  <title>Kumo99.cf</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="favicon.ico">
 </head>

 <body>

<div class="fixed-header">
  <div class="container">
   <nav>
     <a href="index.html">HOME</a>
     <a href="projects.html">PROJECTS</a>
     <a href="about.html">ABOUT</a>
   </nav>
 </div>
</div>

  <div class="box">
  <div class="container">
   <img src="images/avatar.png" alt="" class="box-avatar">
   <h1>KUMO</h1>
   <h5>RANDOM DEVELOPER</h5>
   <ul>
     <li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
   </ul>
  </div>
  </div>

  <div class="fixed-footer">
    <div class="container"><a href="https://steamcommunity.com/id/kumo99">Made by Kumo © 2017</a></div>
  </div>

 </body>
</html>
答案

为标题设置一个z-index,其数字大于.box,默认情况下都是0。所以,就像尝试z-index: 999;一样,您也可以决定为页脚设置更高的z-index值,但是,因为它是在html布局中的.box元素之后添加的,所以它默认显示在顶部。

.fixed-header, .fixed-footer {
    width: 100%;
    position: fixed;
    z-index: 999;
    background: #333;
    padding: 10px 0;
    color: #fff;
    text-align: center;
}

此外,在示例中,我决定更改.box css。不正面为什么你有其他CSS风格。猜猜你正在做一些有点不同的事情。

.box {
    background: #FFFFFF;
    padding: 10px;
    width: 400px;
    height: 600px;
    margin: 0 auto;
    padding: 24px 0;
    box-sizing: border-box;
    text-align: center;
}

body {
  background-color: #323232;
  font-family: Lato;
  padding: 0;
  margin: 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 25px;
  display: inline-block;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.fixed-header, .fixed-footer {
  width: 100%;
  position: fixed;
  z-index: 999;
  background: #333;
  padding: 10px 0;
  color: #fff;
  text-align: center;
}

.fixed-header{
  top: 0;
}

.fixed-footer{
  bottom: 0;
}

.box {
    background: #FFFFFF;
    padding: 10px;
    width: 400px;
    height: 600px;
    margin: 0 auto;
    padding: 24px 0;
    box-sizing: border-box;
    text-align: center;
}
<!DOCTYPE html>

<html lang="en">

 <head>
  <title>Kumo99.cf</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="favicon.ico">
 </head>

 <body>

<div class="fixed-header">
  <div class="container">
   <nav>
     <a href="index.html">HOME</a>
     <a href="projects.html">PROJECTS</a>
     <a href="about.html">ABOUT</a>
   </nav>
 </div>
</div>

  <div class="box">
  <div class="container">
   <img src="images/avatar.png" alt="" class="box-avatar">
   <h1>KUMO</h1>
   <h5>RANDOM DEVELOPER</h5>
   <ul>
     <li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
   </ul>
  </div>
  </div>

  <div class="fixed-footer">
    <div class="container"><a href="https://steamcommunity.com/id/kumo99">Made by Kumo © 2017</a></div>
  </div>

 </body>
</html>
另一答案
.box {
    background: #FFFFFF;
    padding: 10px;
    width: 400px;
    height: 600px;
    text-align: center;
    /* top: 50%; */
    /* left: 50%; */
    /* position: absolute; */
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
}

.fixed-header, .fixed-footer {
    width: 100%;
    position: fixed;
    background: #333;
    padding: 10px 0;
    color: #fff;
    text-align: center;
    z-index: 10;
}

使用这些更新的课程,您可以实现您的目标。

以上是关于内容越过我的标题,但不是页脚?的主要内容,如果未能解决你的问题,请参考以下文章

可折叠工具栏 - 使片段页脚在 Android 中始终可见

页脚不在页面底部

Wordpress - 将代码片段包含到布局的选定部分的插件

是否有一个简单的 html 代码可以在内容最少的页面底部添加页脚? (不使用 CSS)

击中页脚时侧栏停止

引导页脚输入组未拉伸以适合页面