时间戳

首页 > 解决方案 > 为什么我的 html 正文与页脚重叠？

html - 为什么我的 html 正文与页脚重叠？

问题描述

不知道我在这里做错了什么，但我试图在我的 message.html 中应用样式并且我的代码与我的页脚重叠。我怎样才能使它不重叠？对 html/css 仍然很陌生，并且一直在我的代码的其他部分处理这个问题。如何使我的 css 更改仅适用于此特定代码？

消息.html

{% extends "dating_app/base.html" %}

<title>Profile</title>

<!DOCTYPE html>



{% block styles %}
    body{
        margin: 0px;
        padding: 0px;
        background: #f1f1f1;
        font-family: arial;
        box-sizing: border-box;
    }
        .card-container{
        width: 300px;
        height: 430px;
        background: #FFF;
        border-radius: 6px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 0px 1px 10px 1px #000;
        overflow: hidden;
        display: inline-block;
    }
        .upper-container{
        height: 150px;
        background: #7F00FF;
    }
        .image-container{
        background: white;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        padding: 5px;
        transform: translate(100px,100px);
    }
        .image-container img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }
        .lower-container{
        height: 280px;
        background: #FFF;
        padding: 20px;
        padding-top: 40px;
        text-align: center;
    }
        .lower-container h3, h4{
        box-sizing: border-box;
        line-height: .6;
        font-weight: lighter;
    }
        .lower-container h4{
        color: #7F00FF;
        opacity: .6;
        font-weight: bold;
    }
        .lower-container p{
        font-size: 16px;
        color: gray;
        margin-bottom: 30px;
    }
        .lower-container .btn{
        padding: 12px 20px;
        background: #7F00FF;
        border: none;
        color: white;
        border-radius: 30px;
        font-size: 12px;
        text-decoration: none;
        font-weight: bold;
        transition: all .3s ease-in;
    }
    .lower-container .btn:hover{
        background: transparent;
        color: #7F00FF;
        border: 2px solid #7F00FF;
    }

{% endblock %}

{% block content %}
<html>
   <head>
      <title>Profile Card</title>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <div class="card-container">
         <div class="upper-container">
            <div class="image-container">
               <img src="profile.jpg" />
            </div>
         </div>
         <div class="lower-container">
            <div>
               <h3>Alaina Wick</h3>
               <h4>Front-end Developer</h4>
            </div>
            <div>
               <p>sodales accumsan ligula. Aenean sed diam tristique,
                  fermentum mi nec, ornare arch.
               </p>
            </div>
            <div>
               <a href="#" class="btn">View profile</a>
            </div>
         </div>
      </div>
   </body>
</html>

{% endblock content %}

在此处输入图像描述

<title>Profile</title><!DOCTYPE html> {
  % block styles %
}

body {
  margin: 0px;
  padding: 0px;
  background: #f1f1f1;
  font-family: arial;
  box-sizing: border-box;
}

.card-container {
  width: 300px;
  height: 430px;
  background: #FFF;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 1px 10px 1px #000;
  overflow: hidden;
  display: inline-block;
}

.upper-container {
  height: 150px;
  background: #7F00FF;
}

.image-container {
  background: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 5px;
  transform: translate(100px, 100px);
}

.image-container img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.lower-container {
  height: 280px;
  background: #FFF;
  padding: 20px;
  padding-top: 40px;
  text-align: center;
}

.lower-container h3,
h4 {
  box-sizing: border-box;
  line-height: .6;
  font-weight: lighter;
}

.lower-container h4 {
  color: #7F00FF;
  opacity: .6;
  font-weight: bold;
}

.lower-container p {
  font-size: 16px;
  color: gray;
  margin-bottom: 30px;
}

.lower-container .btn {
  padding: 12px 20px;
  background: #7F00FF;
  border: none;
  color: white;
  border-radius: 30px;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  transition: all .3s ease-in;
}

.lower-container .btn:hover {
  background: transparent;
  color: #7F00FF;
  border: 2px solid #7F00FF;
}
<body>
  <div class="card-container">
    <div class="upper-container">
      <div class="image-container">
        <img src="profile.jpg" />
      </div>
    </div>
    <div class="lower-container">
      <div>
        <h3>Alaina Wick</h3>
        <h4>Front-end Developer</h4>
      </div>
      <div>
        <p>sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arch.
        </p>
      </div>
      <div>
        <a href="#" class="btn">View profile</a>
      </div>
    </div>
  </div>
</body>

标签： htmlcss

解决方案

由于此代码，您的问题正在发生：

 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

并且position: absolute;

即使页脚在那里，它也将始终位于页面的中心。我所做的是创建一个新的容器 div，然后将项目文本对齐到中心，而不是使用toporleft

body {
  margin: 0px;
  padding: 0px;
  background: #f1f1f1;
  font-family: arial;
  box-sizing: border-box;
}

.card-container {
  width: 300px;
  height: 430px;
  background: #FFF;
  border-radius: 6px;
  box-shadow: 0px 1px 10px 1px #000;
  overflow: hidden;
  display: inline-block;

}

.upper-container {
  height: 150px;
  background: #7F00FF;
}

.image-container {
  background: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 5px;
  transform: translate(100px, 100px);
}

.image-container img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.lower-container {
  height: 280px;
  background: #FFF;
  padding: 20px;
  padding-top: 40px;
  text-align: center;
}

.lower-container h3,
h4 {
  box-sizing: border-box;
  line-height: .6;
  font-weight: lighter;
}

.lower-container h4 {
  color: #7F00FF;
  opacity: .6;
  font-weight: bold;
}

.lower-container p {
  font-size: 16px;
  color: gray;
  margin-bottom: 30px;
}

.lower-container .btn {
  padding: 12px 20px;
  background: #7F00FF;
  border: none;
  color: white;
  border-radius: 30px;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  transition: all .3s ease-in;
}

.lower-container .btn:hover {
  background: transparent;
  color: #7F00FF;
  border: 2px solid #7F00FF;
}

.main-container{
  text-align: center;
  width: 100vw;
}
<title>Profile</title>


<html>
   <head>
      <title>Profile Card</title>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
   <div>
   here is some text and stuff
   </div>
   <div class="main-container">
      <div class="card-container">
         <div class="upper-container">
            <div class="image-container">
               <img src="profile.jpg" />
            </div>
         </div>
         <div class="lower-container">
            <div>
               <h3>Alaina Wick</h3>
               <h4>Front-end Developer</h4>
            </div>
            <div>
               <p>sodales accumsan ligula. Aenean sed diam tristique,
                  fermentum mi nec, ornare arch.
               </p>
            </div>
            <div>
               <a href="#" class="btn">View profile</a>
            </div>
         </div>
      </div>
         </div>
   <div>
   A footer will probably be here sfg sg sg gsfg sg fsdg sgsdg sd
   </div>
   </body>
</html>

推荐阅读