Estoy creando un sitio con un footer de página fijo (no adhesivo), que se mantiene detrás de la página principal usando z-index para que solo aparezca una vez que el usuario se desplaza hasta la parte inferior del contenido. Se revela asignando un valor de margin-bottom a .pagewrap que es igual a la altura del footer de página.
Debido a que la altura del footer de página es dinámica (cambia con el contenido y el ancho de la ventana gráfica), no puedo darle al div .pagewrap un valor de margin-bottom fijo en px. Más bien, necesito obtener la altura actual del elemento de footer de página y aplicar ese valor al margin-bottom del div principal, presumiblemente usando JS o jQuery (aunque una solución CSS pura sería una revelación, obviamente).
Importante: debido a que el flujo de texto en el footer de página puede hacer que cambie la altura del elemento, la solución a este problema debe ocurrir al cambiar el tamaño Y al cargar.
Puedo encontrar muchos recursos para hacer coincidir la altura usando JS y jQuery, pero todos estos aplican el valor a la propiedad de height del elemento de destino. Aquí se necesita el valor para una propiedad diferente.
JSFiddle: https://jsfiddle.net/sL0brv3j/
html:
<div class="pagewrap"> <p>Scroll down</p> </div> <footer> <p>Fixed position, behind the .pagewrap element</p> </footer>CSS:
body { margin: 0; } .pagewrap { background: #FFF; width: 100%; min-height: 100vh; position: relative; margin-bottom: 64px; /* should be set to = dynamic height of footer*/ z-index: 1; } footer { background: #000; width: 100%; position: fixed; bottom: 0; left: 0; height: auto; /* changeable value */ z-index: 0; } footer p { color: #FFF; }Todavía puede usar position: sticky en el pie de página para hacer esto. Si desea hacer este CSS puro, entonces es muy difícil usar position: fixed porque está fuera del flujo normal del documento, por lo que no tiene idea de los elementos dentro del flujo del documento, pero position: sticky sí.
Usando bottom: 0 para ponerlo en la parte inferior de la página y el z-index: 0 para tenerlo debajo del contenido principal.
Es solo el reverso de un encabezado adhesivo que se encuentra en la parte superior de la página.
footer { background: #000; width: 100%; position: sticky; display: inline-block; bottom: 0; left: 0; height: auto; z-index: 0; }JSFiddle editado: https://jsfiddle.net/g7a8b51z/1/
No necesita escuchar load o resize el tamaño. Debe configurar esto donde está configurando el pie de página.
Puede establecer el margen inferior haciendo
myElement.style.marginBottom = "" + calculated value;Puede hacer esto aprovechando la propiedad height() en jQuery. Cree una variable con este valor y luego utilícela para aplicar el margin-bottom .
var h = $("div").height(); $("h1").css("margin-bottom", h); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Title</h1> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>