font - Pie de página adhesivo CSS con altura desconocida
title html (6)
¡Prueba esto!
Utiliza Flex!
NO ALTURA FIJA, JAVASCRIPT O TABLAS
Se expande cuando hay más contenido, y cuando no está, se pega al fondo
Nota: no funciona con IE 9 y abajo
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}
<body>
<header>
Header
</header>
<div class=''content''>
This is the page content
<br>
PS. Don''t forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>
¿Hay alguna manera de pegar un pie de página en la parte inferior de la pantalla del navegador o justo después del contenido (dependiendo de cuál sea más largo) usando CSS sin saber el tamaño del pie de página por adelantado?
En este momento estoy usando el posicionamiento absoluto en un contenedor que contiene el pie de página y el contenido con la altura mínima del contenedor como 100%, pero si cambio el pie de página, encuentro que debo cambiar el relleno en la parte inferior del contenedor para que coincida con su altura .
Creo que la mejor manera es simplemente agregar una clase a tu pie de página. Javascript hará el resto.
//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
var footerHeight = $(''footer.fixed_footer'').height();
if($(''footer'').hasClass(''fixed_footer'')){
$( "section" ).last().css({
"margin-bottom": footerHeight + ''px''
});
}
@import url(''https://fonts.googleapis.com/css?family=Raleway:400,700,800'');
body{
margin: 0;
padding: 0;
text-align:center;
font-family: ''Raleway'', sans-serif;
line-height: 30px;
}
section{
padding-top: 80px;
padding-bottom: 80px;
border-bottom:1px solid #ddd;
background: #ffffff;
z-index: 9;
}
h1{
font-size: 48px;
font-weight: 800;
text-transform: capitalize;
}
a{
text-decoration: none;
}
.container{
width: 700px;
display: inline-block;
box-sizing:border-box;
padding-left: 30px;
padding-right: 30px;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
}
.footer_top{
border-bottom: 1px solid #777;
padding-bottom: 60px;
}
.logo img{
width: 100%;
height: 100%;
}
.footer_bottom {}
.footer_bottom p{
color:#aaa;
}
.footer_top{
padding-top: 100px;
}
.footer_bottom p a{
color:#158;
}
footer{
width: 100%;
left: 0;
bottom:0px;
z-index: -1;
background: #222222;
}
.fixed_footer{
width: 100%;
position:fixed;
left: 0;
bottom:0;
z-index: -99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is About</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Service</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Portfolio</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<footer class="fixed_footer">
<div class="container">
<div class="footer_top">
<a class="logo" href="portfolio.codeexposer.com">
<img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
</a>
</div>
<div class="footer_bottom">
<p>
All Rights Reserved By <a href="http://portfolio.codeexposer.com">Mohammad Abdus Salam</a>
</p>
</div>
</div>
</footer>
Si está dispuesto a saltar al futuro de HTML5, puede usar flexbox ...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
Mi respuesta más detallada a la misma pregunta: cómo hacer un pie de página fluido y pegajoso (ejemplo completo: http://jsfiddle.net/n5BaR/ )
Resuelto por flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Qué es Flexbox de MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
ya que nadie sabe la respuesta para el pie de página adhesivo sin saber la altura de la misma, utilizando css (solución crosbrowser), me vi obligado a calcularlo
jquery:
if( $(document).height() < $(window).height() )
{
$(''#content'').height
(
$(window).height - $(''#footer'').height()
);
}
estructura html:
<div id="content"></div>
<div id="footer"></div>
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Resumen:
Para un sitio con encabezado, área de contenido y pie de página:
- Establecer
html, body {height: 100%;} - Establezca su cuerpo (o un div envoltorio) para
display: table; width: 100%; height: 100%;display: table; width: 100%; height: 100%; Establezca su encabezado, pie de página y área de contenido para
display: table-row;. Indique suheight: 1px;encabezado y pie de páginaheight: 1px;y da tuheight: auto;área de contenidoheight: auto;El encabezado y el pie de página se expandirán para ajustarse a su contenido. El área de contenido se expandirá para adaptarse a la mayor parte de su contenido o al espacio disponible.
Echa un vistazo a esto, cssstickyfooter , funciona muy bien en cualquier navegador.
Actualización : Esto es a partir de 2010, podría no ser relevante con los estándares actuales