He intentado muchas soluciones en stackoverflow para mi problema, pero de alguna manera ninguna funciona. Actualmente mi pie de página cubre el contenido principal. Esto solo sucede cuando reduzco la página al punto en el que estoy en la vista móvil. Tengo que decir que el pie de página siempre debe estar en la parte inferior. Entonces, si mi contenido principal es demasiado corto, el pie de página debería estar al final de la página. Actualmente estoy usando bootstrap 4.3.1. Mi Site.css se ve así:

#footer {
    position: absolute;
    bottom: 0px;
}

Por supuesto, hay otras líneas en Site.css. Pero no son importantes para esto.

Y mi diseño se ve así:

<div class="jumbotron-fluid body-content">
        <div id="main">
            @RenderBody()
        </div>

            <footer id="footer" class="page-footer font-small blue pt-4 footerInfo">
                <div class="row footerRow">
                    <div class="col-lg-3 footerCol">
                        <div class="footer-item text-center">
                            <div class="footer_icon d-flex flex-column justify-content-center ml-auto mr-auto">
                                <div class="fa fa-phone phoneIcon"></div>
                            </div>
                            <div><h3>Telefon</h3></div>
                            <div>12345</div>
                        </div>
                    </div>

                </div>
            </footer>
        </div>

No quiero que el pie de página cubra mi contenido principal. El pie de página debe crecer hacia abajo en la vista móvil. Actualmente está creciendo hacia arriba y cubre mi contenido completo.

¿Alguien puede ayudar?

Gracias.

0
Ali 22 sep. 2019 a las 09:30

3 respuestas

La mejor respuesta

Para usar CSS puro, min-height: 100vh; display: flex; flex-direction:column en el contenedor y flex-grow: 1 en el contenido principal son el camino a seguir.

O, simplificado por las clases Bootstrap:

<div class="d-flex flex-column" style="min-height: 100vh">
  <main class="flex-fill"></main>
  <footer></footer>
</div>

Breve ejemplo:

/* not part of the solution, visual helper */
footer {
  background-color: #369;
  color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column" style="min-height: 100vh">
  <main class="flex-fill">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          @RenderBody()
        </div>
      </div>
    </div>
  </main>

  <footer id="footer" class="page-footer font-small blue footerInfo">
    <div class="container-fluid">
      <div class="row footerRow">
        <div class="col-lg-3 footerCol py-2">
          <div class="footer-item text-center">
            <div class="footer_icon d-flex flex-column justify-content-center ml-auto mr-auto">
              <div class="fa fa-phone phoneIcon"></div>
            </div>
            <div>
              <h3>Telefon</h3>
            </div>
            <div>12345</div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

Ejemplo alto:

/* not part of the solution, visual helper */
main {
  min-height: 200vh;
  border: 1px solid red;
}

footer {
  background-color: #369;
  color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column" style="min-height: 100vh;">
  <main class="flex-fill">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          @RenderBody()
        </div>
      </div>
    </div>
  </main>

  <footer id="footer" class="page-footer font-small blue footerInfo">
    <div class="container-fluid">
      <div class="row footerRow">
        <div class="col-lg-3 footerCol py-2">
          <div class="footer-item text-center">
            <div class="footer_icon d-flex flex-column justify-content-center ml-auto mr-auto">
              <div class="fa fa-phone phoneIcon"></div>
            </div>
            <div>
              <h3>Telefon</h3>
            </div>
            <div>12345</div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

También preste atención al sistema de diseño. Funciona como un reloj, pero es algo delicado:

  • .col-*-* como descendientes directos de .row s. Si necesita otra división, coloque un .row dentro de un .col (es decir: .row > .col > .row > .col, nunca .col > .col o .row > .row)
  • ¡nunca anides .container s! (sin embargo, puede tener un .container dentro de un .container-fluid)
1
tao 22 sep. 2019 a las 11:54

Sugiero que establezca la propiedad de su pie de página en posición fija y desbordamiento oculto

-1
Godwyne 22 sep. 2019 a las 07:49

¿Utilizó alguna consulta de medios para establecer el comportamiento en un tamaño de pantalla específico? a continuación hay un código de muestra

@media only screen and (max-device-width: 480px) {}

En tu css

-1
Joe CXT 22 sep. 2019 a las 06:37