div - title html css
Haga que el pie de página se adhiera correctamente al pie de la página (10)
¿Por qué no usar: { position: fixed; bottom: 0 } { position: fixed; bottom: 0 } ?
Esta pregunta ya tiene una respuesta aquí:
Intento que mi pie de página (solo un div con una línea de texto) esté en la parte inferior de la pantalla si el contenido no llega al final, o estar en la parte inferior del contenido si el el contenido requiere barras de desplazamiento. Si el contenido no requiere barras de desplazamiento, funciona perfectamente, pero cuando el contenido es demasiado largo, el pie de página sigue en el mismo lugar, sentado justo encima del contenido.
Mi estructura div básica es:
<div id="container">
<div id="body"></div>
<div id="footer"></div>
</div>
Mi CSS correspondiente (algo despojado):
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;
}
#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;
}
El modelo que se comparte aquí es muy similar al StickyFooter de Ryan Fait http://ryanfait.com/sticky-footer
Solo falta un div hasta ahora en esta discusión (el modelo propuesto aquí por Kenneth Palanganas funcionó bien para el diseño local de Win81 durante aproximadamente 48 horas y luego en ie / cromo colapsó por un motivo desconocido). El div "push" de Ryan satisfará a algunos navegadores reacios. Tenga en cuenta que px es habitual, sin embargo, para la consistencia del diseño líquido, em puede ser preferible.
* { border: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; }
.footer, .push { height: 1em; }
<div class="wrapper"><p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer"><p>This is a footer</p>
</div>
Esto debería ayudarte, vamos a probarlo.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer''s height */
}
.footer {
height: 155px;
}
La solución más simple es usar min-height en la etiqueta <html> y colocar el <footer> con position:absolute;
Demostración : jsfiddle y SO snippet:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
Me gustaría compartir cómo resolví el mío usando la función de Javascript que se llama en la carga de la página. Esta solución coloca el pie de página en la parte inferior de la pantalla cuando el alto del contenido de la página es menor que el alto de la pantalla.
function fix_layout(){
//increase content div length by uncommenting below line
//expandContent();
var wraph = document.getElementById(''wrapper'').offsetHeight;
if(wraph<window.innerHeight){ //if content is less than screenheight
var headh = document.getElementById(''header'').offsetHeight;
var conth = document.getElementById(''content'').offsetHeight;
var footh = document.getElementById(''footer'').offsetHeight;
//var foottop = window.innerHeight - (headh + conth + footh);
var foottop = window.innerHeight - (footh);
$("#footer").css({top:foottop+''px''});
}
}
function expandContent(){
$(''#content'').append(''<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>''+
''<p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>''+
''<p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>''+
''<p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>''+
''<p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.</p>'');
}
/*sample CSS*/
body{ background: black; margin: 0; }
#header{ background: grey; }
#content{background: yellow; }
#footer{ background: red; position: absolute; }
#header, #content, #footer{ display: inline-block; width: 100vw; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="fix_layout()">
<div id="wrapper">
<div id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
[some header elements here]
</div>
<div id="content" class="container">
[some content elements here]
</div>
<div id="footer" class="footer">
[some footer elements here]
</div>
</div>
</body>
Espero que ayude.
Usa este. Lo arreglará.
#ibox_footer {
background-color: darkslategrey;
color: bisque;
font-size: small;
padding-top: 3px;
position: absolute;
height: 20px;
margin-bottom: 0;
bottom: 0;
width: 100%;
}
Use min-height como un valor de píxel, en lugar de%. Me gusta: min-height: 620px; altura: auto;
y pie de página como:
.footer {
height:70px;
clear:both;
position:relative;
bottom:0;
width: 100%;
}
el truco más fácil es establecer una min-height en el contenedor de su página a 400px, suponiendo que su pie de página aparezca al final. ni siquiera tiene que poner CSS para el pie de página o simplemente un width:100% suponiendo que su pie de página es hijo directo de su <body>
hacerlo usando jQuery poner código dentro de la etiqueta <head></head>
<script type="text/javascript">
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $(''#footer'').height();
var footerTop = $(''#footer'').position().top + footerHeight;
if (footerTop < docHeight) {
$(''#footer'').css(''margin-top'', 10 + (docHeight - footerTop) + ''px'');
}
});
</script>
Una solución simple que uso, funciona desde IE8 +
Proporcione min-height: 100% en html, de modo que si el contenido es menor, la página estática toma toda la altura del puerto de visualización y el pie de página en la parte inferior de la página. Cuando el contenido aumenta, el pie de página se desplaza hacia abajo con el contenido y sigue pegado al fondo.
Demostración de JS violín trabajando: http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>