Quiero un fijo en el pie de página en la parte inferior de mi página de donde yo soy capaz de tener una línea de texto (todo el texto centrado), al igual que este.

Este es mi código actual.

He intentado usar otros tutoriales, pero ninguno han trabajado.

¿Cómo puedo hacer esto?

  • Marque la casilla de «Relacionados» enlaces a la derecha de esta página.
  • Que los tutoriales que han intentado y qué problemas se ejecuta en?
  • Todos los tutoriales dicen que establecer html y el cuerpo al 100%. Haciendo que los tornillos de mi página por poner todo el contenido hacia arriba.
InformationsquelleAutor Feriscool | 2013-02-08

2 Comentarios

  1. 2

    Me gustaría recomendar el uso de Ryan Fait pegajosas de pie de página. Se puede lograr lo que usted está tratando de hacer con puro CSS.

    HTML:

    <div class="wrapper">
        Content Here
        <div class="push"></div>
    </div>
    <div class="footer"></div>

    CSS:

    * {
        margin: 0;
    }
    
    html, body {
        height: 100%;
    }
    
    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    }
    
    .footer, .push {
        height: 142px; /* .push must be the same height as .footer */
    }
    
    .footer { /* centers the text */
        text-align: center; /* horizontal centering */
        line-height: 142px; /* vertical centering; should be equal to the footer height */
    }
    • El problema con esta es la configuración de cuerpo y html al 100%. Se tornillos de mi página.
    • ¿Por qué su body y html tener una altura diferente de 100%?
    • Cuando me puse a 100%, empuja todo el contenido hacia arriba. Mirar el código que he puesto en el post original.
    • Puedes publicar tu CSS?
    • Es el original de CSS que viene con Bootstrap: http://pastebin.com/yKwXe5AQ
    • El problema con esto es que cuando me puse a cuerpo,html, a la altura:100%, se mueve todo el contenido hacia arriba (el héroe de la unidad se mueve bajo la barra de navegación): http://i.imgur.com/DdSQL37.png
    • Ha seguido la estructura HTML correctamente? El bootstrap tiene algunos divs fuera del contenedor, y el pie de página dentro del contenedor. Y se han cambiado los nombres de clase en el CSS o HTML para alinear con el Ryan Fait nombres/estructura?
    • He puesto todo el código CSS en el archivo html para probar por ahora y que no ha funcionado. Podría usted intentar aplicar directamente en mi código (probablemente estoy perdiendo algo estúpido como de costumbre): http://pastebin.com/T32XEk1F
    • Los nombres de clase en el CSS que he publicado no encajan con los de bootstrap. Usted necesita a la hora de personalizar. He publicado un ejemplo muy sencillo de Ryan Fait sitio web para mostrarte cómo funciona.

  2. 1

    Tratar de cambiar el pie de página de elemento y el elemento anterior elemento hr como este:

    <footer style="position:fixed; left:0px; right:0px; bottom:0px;
          background:rgb(255,255,255); text-align:center;">
      <hr>
      <p>&copy; Company 2012</p>
    </footer>

    Pienso que esto es más o menos resuelve el problema. No funciona exactamente como el pie de página en http://ryanfait.com/sticky-footer/, pero hasta donde yo entiendo su pregunta qué es lo que quiere.

    PS: El CSS debe, por supuesto, poner en el CSS de archivo.

Dejar respuesta

Please enter your comment!
Please enter your name here