表格是重叠的页脚，它总是在 table 和表格之间

Question

我尝试了很多东西，但我无法让它发挥作用。表单的内容总是位于底部并与页脚重叠。我尝试 position absolute: bottom 0;但不起作用。页脚总是位于 table 和表格之间。我将非常感谢您的帮助。谢谢

这是HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cotizador de Seguros</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="Style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script defer src="autos.js"></script>
    <script defer src="variables.js"></script>    
    <script defer src="cotizadordeauto.js"></script>
</head>
<body>
  <div class="topnav">
        <!-- <a class="active" href="#home">Home</a> -->
      <h1>Seguros Sunshine</h1>       
  </div>
  <div>
    <h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
    <p id="intro">Contamos con tres diferentes productos para satisfacer tus necesidades. Seguros contra Terceros, que cubre aquellas terceras personas involucradas en cualquier accidente. A su vez contamos con una oferta un poco mas ampliada con la opcion Terceros Ampliada, que incluye granizo o robo q hayas sufrido. Por ultimo tenemos un seguro contra todo riesgo llamado Riesgo Total donde te garantiza la total cobertura de tu vehiculo. A continuacion los podes ver con mas detalle.</p>
    <div>
      <table class="table table-bordered table-info" id="productos">
        <thead>
          <tr>
            <th scope="col">Tipo de Seguro</th>
            <th scope="col">Responsabilidad civil</th>
            <th scope="col">asistencia en ruta</th>
            <th scope="col">Granizo</th>
            <th scope="col">Robo</th>
            <th scope="col">Incendio</th>
            <th scope="col">Remolque ilimitado</th>
            <th scope="col">Vehiculo de sustitucion</th>
            <th scope="col">Daños propios</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Terceros</th>
            <td>&#10003</td>
            <td>&#10003</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Terceros Ampliada</th>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Todo Riesgo</th>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <p id="todaInfo"></p>
  <div class="container" id="preguntas">        
      <br>
      <br>
      <h3>Ingresa tus datos para iniciar una cotizacion</h3>
      <table class="table table-striped">    
      <thead>
          <input type="text" id="nombre" class="no-outline" placeholder="Nombre">
          <input type="number" id="edad" class="no-outline" placeholder="Edad">
          <input type="email" id="email" class="no-outline" placeholder="Email">
          <input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
          <div>
            <button onclick="Guardar()" id="guardado">Guardar</button>
          </div>
      </thead>
      <tbody id="info" class="shadow">          
      </tbody>
      </table>
  </div>
  <br> 
  <div class="container shadow col-lg-6">
      <div id="contenido" class="pb-auto" style="display: none">
        <header class="p-3 bg-info text-white text-uppercase rounded">
          <h1 class="text-center">Cotiza tu auto aqui</h1>
        </header>
        <form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
          <div class="d-flex align-items-center mb-5">
            <label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
            <select class="d-flex mt-2 p-3 rounded" id="marca">
              <option value="" disabled selected> Seleccionar </option>
            </select>
            <label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
            <select class="d-flex mt-2 p-3 rounded" id="modelo">
              <option value="" disabled selected> Seleccionar </option>
            </select>
          </div>
          <div class="d-flex justify-content-around align-items-center mb-5">
            <label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
            <select class="d-flex p-3 rounded" id="year">
              <option value="" disabled selected> Seleccionar </option>
            </select>
            <label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
            <input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
          </div>
          <fieldset>
            <legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>    
            <div class="d-flex justify-content-around mt-5">
              <div>
                <label class="font-weight-bold text-uppercase mr-2">Terceros</label>
                <input type="radio" name="tipo" value="terceros" checked>
                </label>
              </div>
              <div>
                <label class="font-weight-bold  text-uppercase mr-2">Terceros Ampliada</label>
                <input type="radio" name="tipo" value="terceros-ampliada">
                </label>
              </div>
              <div>
                <label class="font-weight-bold  text-uppercase mr-2">Todo Riesgo</label>
                <input type="radio" name="tipo" value="todo-riesgo">
                </label>
              </div>
            </div>
          </fieldset>
    
          <div id="cargando" style="display: none">
            <div class="spinner">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
          <div id="resultado"></div>
          <div class="d-flex justify-content-center py-4">
            <button type="submit"
                class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
            </button>
          </div>
    
        </form>
      </div>
    </div>
     <!--Cierre del form y container-->
    <br>
  
  <div class="d-flex">
    <footer class="page-footer">
      <div class="text-center">© 2020 Copyright Seguros Sunshine</div>      
    </footer>
  </div>
</body>
</html>

这是CSS

* {
    box-sizing: border-box;
}

.topnav {
    background-color: rgb(0, 50, 80);
    overflow: hidden;
    padding-bottom: 5px;
    padding-top: 15px;
  }

h1 {
    text-align: center;
    color: whitesmoke;
}

h2 {
    text-align: center;
    color: rgb(80, 80, 80);
    margin-top: 50px;
}
#intro {
    color: rgb(80, 80, 80);
    text-align: justify;
    font-size: large;
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 30px;
}
#productos {
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    width: 70%;
}
@media (min-width: 992px) and (max-width: 1199px) {
    #productos {
        font-size: small;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #productos {
        font-size: small;
        overflow: scroll;
    }
}
@media (max-width: 767px) {
    #productos {
        font-size: x-small;
        font-weight: normal;
        overflow: scroll;
    }
}
th {
    color: rgb(80, 80, 80);
}
tr {    
    text-align: center;
}
h3 {
    color: rgb(80, 80, 80);
    margin-bottom: 20px;
    margin-left: 30px;
}

h4 {
    color: rgb(80, 80, 80);
}
/* #preguntas {
    position: relative;
    z-index: 1;
} */
.table-striped {
    color:  rgb(80, 80, 80);
    width: 400px;
    margin-top: 150px;
}
th {
    text-align: center;
    text-transform: uppercase;
}
#nombre {
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;
    margin-right: 7px;
}
#edad {
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;
    margin-right: 7px;
}
#email {
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;
    margin-right: 7px;
}
#telefono {
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;
}
.no-outline:focus {
    outline: none;
  }
#guardado {
    background-color: #5bc0de;
    border-radius: 5px;
    color: whitesmoke;
    font-weight: bold;
    margin-left: 20px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
@media (min-width: 992px) {
    .col-lg-6 {
        color:  rgb(80, 80, 80);
        margin-right: 50px;
        margin-top: -370px
    }   
}
.font-weight-bold[for="year"] {
    margin-left: 51px;
}
#color {
    border: solid grey 1px;
    font-style: italic;
    width: 170px;
}
.cargando { 
    text-align: center;
}
.error {
    background-color: #FBE9E7;
    border: 1px solid #F4511E;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    color: #F4511E;
}
.correcto {
    background-color: rgb(211, 249, 187);
    border: 1px solid rgb(50, 167, 0);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    color: rgb(4, 150, 50);
}
#resultado  {
    margin-bottom: 40px;
}
#resultado div {
    border-bottom: 2px solid #5bc0de;
    text-align: center;
    padding: 0  0 20px 0;
}
#resultado div p {
    margin-bottom: 0;
}
#resultado div p.header {
    background-color: #5bc0de;
    margin-bottom: 10px;
    margin-top: 30px;
    color:white;
    padding: 10px;
    text-transform: uppercase;
    font-weight: bold;
}
.spinner {
    margin: 100px auto 0;
    padding-bottom: 70px;
    width: 70px;
    text-align: center;
}
  
.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #333;
  
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
  
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
  
.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
  
@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}
  
@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
      -webkit-transform: scale(0);
      transform: scale(0);
    } 40% { 
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
    }
}
body {
    height: 100%;
} 
footer {
    background-color: rgb(0, 50, 80);
    color: whitesmoke;
    padding-bottom: 10px;
    padding-top: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;

}

Answer 1

你的问题是这样的：

@media (min-width: 992px) {
    .col-lg-6 {
        color:  rgb(80, 80, 80);
        margin-right: 50px;
        margin-top: -370px  /* this is the causing the problem */
    }   
}

去掉 margin-top，还有页脚的 position:absolute，页脚会很好地位于底部，我想这就是您想要的。

表格是重叠的页脚，它总是在 table 和表格之间

form is overlapping footer, it gets always in between table and form

html

css

forms

footer