Question

我在布局中有这样的页脚：

  <footer>
        <div class="PiePagina"><img src="~/Content/ImagenCorp/Fondos/banner_inferior.png" alt="" ></div>
    </footer>

footer css：

.PiePagina  
{
    height: 50px;
    position:relative;
    bottom: 0;
}

和这样的表到索引：

<div role="tabpanel" class="tab-pane" id="empleados">
  <div class="row" style="margin-top:10px">
    <div class="col-md-12">
      <a href="javascript:;" class="importar empleados">
        <button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
          <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> Importar
        </button>
      </a>
    </div>
  </div>
  <div style="margin:15px 0 0 0;">
    <table class="table table-striped table-hover table-bordered dt-responsive" id="tbl-empleados" style="width: 100%">
      <thead style="">
        <tr>
          <th>Empleado</th>
          <th>Gerente</th>
          <th>Evaluación</th>
          <th>Sueldo Actual</th>
          <th>CR</th>
          <th>Mover a
            <br />Mínimo</th>
          <th>Matriz de
            <br />Mérito</th>
          <th>Ajuste</th>
        </tr>
      </thead>
      <tbody style="">
        @foreach (var item in Model.Empleados) {
        <tr>
          <td>@item.vEmpleado</td>
          <td>@item.vGerente</td>
          <td>@item.vEvaluacion</td>
          <td>@item.dSueldoActual.ToString("C2")</td>
          <td>@item.dCR.ToString("P2")</td>
          <td>@(item.bMinimo ? "Sí" : "No")</td>
          <td>@(item.bMerito ? "Sí" : "No")</td>
          <td>@(item.bAjuste ? "Sí" : "No")</td>
        </tr>
        }
      </tbody>
    </table>
  </div>
</div>

该表可以有很多项目。因此，在Chrome上面的表格（在Internet Explorer中）上方的页脚似乎很好。为什么会这样？我究竟做错了什么？问候

Answer 1

你在某些元素中使用了浮点数吗？也许清理页脚。

User.find({
    $or: [
        {schoolName: regex},
        {city: regex},
        {schoolRepresentativeName: regex},
        {schoolRepresentativeTutorMentor: regex}
    ]
}, function (err, users) {
    res.render('dashboard/index.hbs', {
        pageTitle: 'Dashboard',
        total: users.length,
        users: users
    });
});

Answer 2

我没有得到您想要说的内容，但此代码对于Chrome和IE完全正常。如果你想让你的页脚在顶部。请试试这个。我使用了内联样式，你可以根据需要创建一个类。如果您有任何疑惑，请告诉我：

 <footer>
   <div class="PiePagina" style="background-image: url(https://www.w3schools.com/w3css/img_fjords.jpg); background-repeat: no-repeat; background-size: 100% 100%;"></div>
</footer>

PS使用您在我使用的网址中使用的所需图像

Answer 3

我不确定这是不是你想要的。

通过将所有内容包装在容器中，可以使用position:absolute;将页脚放置在表格的底部，因为我认为您打算

＆＃13;

.cont {
  position: relative;
}

.PiePagina {
  height: 50px;
  position: absolute;
  bottom: 0;
}

＆＃13;

<div class="cont">
  <footer>
    <div class="PiePagina"><img src="https://via.placeholder.com/800x80" alt=""></div>
  </footer>

  <div role="tabpanel" class="tab-pane" id="empleados">
    <div class="row" style="margin-top:10px">
      <div class="col-md-12">
        <a href="javascript:;" class="importar empleados">
          <button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
          <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> Importar
        </button>
        </a>
      </div>
    </div>
    <div style="margin:15px 0 0 0;">
      <table class="table table-striped table-hover table-bordered dt-responsive" id="tbl-empleados" style="width: 100%">
        <thead style="">
          <tr>
            <th>Empleado</th>
            <th>Gerente</th>
            <th>Evaluación</th>
            <th>Sueldo Actual</th>
            <th>CR</th>
            <th>Mover a
              <br />Mínimo</th>
            <th>Matriz de
              <br />Mérito</th>
            <th>Ajuste</th>
          </tr>
        </thead>
        <tbody style="">

          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>
          <tr>
            <td>@item.vEmpleado</td>
            <td>@item.vGerente</td>
            <td>@item.vEvaluacion</td>
            <td>@item.dSueldoActual.ToString("C2")</td>
            <td>@item.dCR.ToString("P2")</td>
            <td>@(item.bMinimo ? "Sí" : "No")</td>
            <td>@(item.bMerito ? "Sí" : "No")</td>
            <td>@(item.bAjuste ? "Sí" : "No")</td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
</div>

＆＃13;

页脚顶部的页脚位置

3 个答案: