为什么当我将 div 设置为响应式正方形时，div 的背景颜色没有显示？答案

【问题标题】：Why does the background color of the div is not showing when I made the div a responsive square?为什么当我将 div 设置为响应式正方形时，div 的背景颜色没有显示？
【发布时间】：2021-10-10 05:37:19
【问题描述】：

我正在尝试制作此致敬页面，并且由于我制作的框（表单字段所在的位置）不断与上面的标题重叠，因此我尝试使框响应。但是，背景色在我完成后消失了，我不知道如何从那里开始。顺便说一下，这是 HTML 代码。

<body>
  <div id="maintitle-div"><h1 id="maintitle" class="maintitle">atrovska</h1></div>
  <div class="box"> 
    <div class="content">
      <h1 id="title">???? Tell us how we're doing! ????</h1>
      <p id="description"> Your feedback matters to us and rest assured we will use this to improve our services even further. </p>
      <form id="survey-form">
        <label id="name-label">
          Name <br> <input type="text" id="name" placeholder="Enter your Name" required> </label><br>
  <label id="email-label">
    Email <br> <input type="email" id="email" placeholder="Enter your Email" required></label>
    <label id="number-label">
    <input type="number" id="number" placeholder="Enter your phone number" required max="1" min="5">Number</label> 
  <p>What services did you avail?</p>
  <select name="services" id="dropdown">
    <option value="Internet">Internet </option>
    <option value="Data">Data</option>
    <option value="Post-paid">Post-Paid</option> </select><br>
  <p> Please select your service provider.</p>
  <input type="radio" name="provider" value="globe">Globe
  <input type="radio" name="provider" value="globe">Globe
  <input type="radio" name="provider" value="globe">Globe
  <p> Please select your service provider.</p>
  <input type="checkbox" name="provider" value="globe">Globe
  <input type="checkbox" name="provider" value="globe">Globe
  <input type="checkbox" name="provider" value="globe">Globe
  <textarea></textarea>
    
  <button type="submit" id="submit">Submit</button>
</form>
  
  </div>
    
  </div></body>

这就是 CSS。

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --color-darkBlue: rgb(66, 7, 188);
}

body {
  background-image: url(https://i.pinimg.com/originals/6d/25/f2/6d25f2bc9f8c59dc9d5fbab6809126f8.jpg);
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
}

#maintitle {
  font-family: 'Press Start 2P', cursive;
  color: rgb(255, 201, 14);
  margin-top: 5px;
  font-size: 48px;
  margin: 30px 0 30px auto;
  text-align: center;
  
}
.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
}

.box {
  border-radius: 15px;
  position: relative;
  width: 50%;
  margin: 0 auto;
  background-color: white;
  
  
}

.box::after {
  content: "";
  display: block;
  padding-bottom; 100%;
  width: 100%;
  height: 100%;
  background-color: white;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
}

#title {
  font-family: 'Fredoka One', cursive;
  color: var(--color-darkBlue);
  margin-top: 5px;
  font-size: 24px;
  margin-bottom: 2px;
  text-align: center;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: rgb(66, 7, 188);
  font-size: 8px;
}

#description {
  font-weight: 900;
  font-size: 14px;
  margin-top: 10px;
}

#survey-form {
  margin: 5px 0 5px auto;
}

input {
  margin: 6px 0 5px auto;
}

#survey-form {
  font-family: 'Open Sans', sans-serif;
  color: black;
  font-size: 11px;
}

【问题讨论】：

您似乎没有使用 background-color 属性，您是否将其从代码中删除？
我删除了它，因为它不起作用，但我又试了一次，但现在我把它放在 .box、.box::after 和 .content 类上，它仍然不起作用。
你能把你的代码减少到最小的可重现的例子吗？删除不必要的类、节点和实体，以简化为更易读、更易于浏览的内容。

标签： html css responsive-design background-color

【解决方案1】：

您的代码中有 CSS 语法错误。

.box::after {
  content: "";
  display: block;
  padding-bottom; 100%;
  width: 100%;
  height: 100%;
  background-color: white;
}

应该是：

.box::after {
  content: "";
  display: block;
  padding-bottom: 100%;
  width: 100%;
  height: 100%;
  background-color: white;
}

然后将 .content 类赋予背景颜色作品：

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
}

将内容背景绘制为红色。

【讨论】：

谢天谢地，盒子终于有了颜色，但是，颜色只到 p 行，“请选择您的互联网提供商”，然后在调整大小时颜色又消失了？顺便说一下，这是结果的代码笔的链接。 codepen.io/christelle10/pen/mdmKOXd?editors=1100
在我的浏览器中看起来不错。你用什么浏览器？
谷歌浏览器。我尝试将其恢复为原始代码，现在 div 框再次与主标题重叠:(