拆分网站设计和页脚不会显示，我怎样才能让它显示？

Question

我一直在关注视频和网站等。对于 'about' 页面，我将其分屏（图片下方有关于人物的信息）现在我想添加一个带有版权等的页脚。但由于正文的样式，我无法让它显示任何关于如何保持页面外观相同但显示页脚的想法？

/*  ABOUT US */


/* Split the screen in half */

.split {
  height: 95%;
  width: 50%;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  padding-top: 20px;
}


/* Control the left side */

.left {
  left: 0;
  background-color: white;
}


/* Control the right side */

.right {
  right: 0;
  background-color: white;
}


/* If you want the content centered horizontally and vertically */

.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}


/* image inside the centered container */

.centered img {
  width: 500px;
  border-radius: 50%;
}

.personal-information {
  margin: 20px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #498DD5;
  font-size: 20px;
}

.name {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #3C395C;
}

<div class="split left">
  <div class="centered">
    <img src="images/who.jpg" alt="Avatar woman">
    <h2 class="name">Brain Davis</h2>
    <p class="personal-information">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit sint commodi ut quisquam quae iste culpa quibusdam dolorum aut iusto, amet sed dolores perspiciatis reiciendis, temporibus quasi doloremque voluptatibus est.</p>
  </div>
</div>

<div class="split right">
  <div class="centered">
    <img src="images/who2.jpg" alt="Avatar man">
    <h2 class="name">John Doe</h2>
    <p class="personal-information">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus vero beatae dolorem maiores quia earum ea omnis sed deleniti. Aperiam excepturi aliquid architecto ea, facere itaque ad voluptas ducimus delectus.</p>
  </div>
</div>

Answer 1

使用 class 样式创建一个新的 div：

    .footer {
    position: fixed;
    top: 95%;
    width: 100%;
    background-color: yellow;
    }

片段：

/*  ABOUT US */


    /* Split the screen in half */

    .split {
      height: 95%;
      width: 50%;
      position: fixed;
      overflow-x: hidden;
      padding-top: 20px;
    }
    
    .footer {
    position: fixed;
    top: 95%;
    width: 100%;
    background-color: yellow;
    }


    /* Control the left side */

    .left {
      left: 0;
      background-color: white;
    }


    /* Control the right side */

    .right {
      right: 0;
      background-color: white;
    }


    /* If you want the content centered horizontally and vertically */

    .centered {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }


    /* image inside the centered container */

    .centered img {
      width: 500px;
      border-radius: 50%;
    }

    .personal-information {
      margin: 20px;
      font-family: "Roboto", sans-serif;
      font-weight: bold;
      color: #498DD5;
      font-size: 20px;
    }

    .name {
      font-family: "Roboto", sans-serif;
      font-weight: bold;
      color: #3C395C;
    }

<div class="split left">
  <div class="centered">
    <img src="images/who.jpg" alt="Avatar woman">
    <h2 class="name">Brain Davis</h2>
    <p class="personal-information">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit sint commodi ut quisquam quae iste culpa quibusdam dolorum aut iusto, amet sed dolores perspiciatis reiciendis, temporibus quasi doloremque voluptatibus est.</p>
  </div>
</div>

<div class="split right">
  <div class="centered">
    <img src="images/who2.jpg" alt="Avatar man">
    <h2 class="name">John Doe</h2>
    <p class="personal-information">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus vero beatae dolorem maiores quia earum ea omnis sed deleniti. Aperiam excepturi aliquid architecto ea, facere itaque ad voluptas ducimus delectus.</p>
  </div>
</div>

<div class="footer">THIS IS A FOOTER</div>

Answer 2

/* Split the screen in half */

.split {
  height:95%;
  width: 50%;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  padding-top: 20px;
}


/* Control the left side */

.left {
  left: 0;
  background-color: white;
}


/* Control the right side */

.right {
  right: 0;
  background-color: white;
}


/* If you want the content centered horizontally and vertically */

.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}


/* image inside the centered container */

.centered img {
  width: 500px;
  border-radius: 50%;
}

.personal-information {
  margin: 20px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #498DD5;
  font-size: 20px;
}

.name {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #3C395C;
}
.container {
    width:100%;
    height:100%;
    position:relative;
}

.footer{
    position:fixed;
    width:100%;
    text-align:center;
    height:5%;
    min-height:30px;
     color: #fff;
     background-color:#000;
  font-size: 20px;
  padding:10px;
  bottom:0;
  z-index:3;
}

<div class="container">
<div class="split left">
  <div class="centered">
    <img src="images/who.jpg" alt="Avatar woman">
    <h2 class="name">Brain Davis</h2>
    <p class="personal-information">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit sint commodi ut quisquam quae iste culpa quibusdam dolorum aut iusto, amet sed dolores perspiciatis reiciendis, temporibus quasi doloremque voluptatibus est.</p>
  </div>
</div>

<div class="split right">
  <div class="centered">
    <img src="images/who2.jpg" alt="Avatar man">
    <h2 class="name">John Doe</h2>
    <p class="personal-information">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus vero beatae dolorem maiores quia earum ea omnis sed deleniti. Aperiam excepturi aliquid architecto ea, facere itaque ad voluptas ducimus delectus.</p>
  </div>
</div>
<div class="footer">
    copyright 2020
</div>
</div>

拆分网站设计和页脚不会显示，我怎样才能让它显示？

Split website design and footer won't display, How can I get it to display?

html

css

footer