Estoy tratando de posicionar mi pie de página en la parte inferior de la página, pero con poco éxito.

Sólo puedo pegar el enlace, ya que hay un montón de CSS y no estoy seguro de donde es mi problema.

Así, este es el link: Prueba ; Si alguien quisiera ayudarme te lo agradecería.

EDITAR: La pregunta es vieja y la url ya no está más allí, pero la respuesta puede ser considerado válido de todos modos, cuando un individuo necesita para colocar un pie de página (o cualquier otro elemento) a la parte inferior de la página (los llamados pegajosa pie de página).

  • Script: raw.github.com/chaoscod3r/less.js/master/dist/… , Firefox se estrelló, me pidió que dejara de dicho script.
  • Hay un respaldo para que, a la carga a nivel local. Intente en unos minutos, mi servidor pueden actuar como acabo de subir los archivos.
  • Este es un buen ejemplo de por qué toda la información relevante debe ser incluido en la pregunta, no se hace referencia por los enlaces. Sí, las respuestas podrían ser útiles, pero la pregunta es muy vaga. Si edita la pregunta para hacerla más significativa que me voy a dar una vuelva a abrir la votación.
InformationsquelleAutor Roland | 2012-05-06

4 Comentarios

  1. 6

    De hecho lo he utilizado este solución últimamente. Funciona muy bien. Y si tiene contenido dinámico dentro del pie de página usted puede fácilmente hacer un script que cambiar tamaño o cambio de la orientación de los cambios de la altura del pie de página y el margen sobre el cuerpo.

    html {
        position: relative;
        min-height: 100%;
    }
    
    body {
        margin-bottom: 100px;
    }
    
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px; //same height as the margin to the bottom of the body
    }
    • Tenga en cuenta que su pregunta fue secuestrado por alguien más, convirtiéndola en una completamente diferente de la pregunta. Me han dado marcha atrás en el cambio, como no se hizo de buena fe. Puede que desee aclarar si su respuesta se aplica a la pregunta original así.
    • Me he dado cuenta de que, pero yo no podía entender cómo él/ella hizo eso, ni yo podría revertir o negar su/suyo cambios. Gracias por hacerlo 🙂
  2. 2
    #footer {
          margin-top: -50px;
    }

    Quitar que de #footer {} definición. También, desde la que desea es relativa, tendrás que aumentar la altura del div por encima del pie de página, hasta que llega a la final de la pantalla. De lo contrario tendrás que utilizar posicionamiento absoluto.

    Edit : También eliminar «position: relative» de #footer

    Edit 2: la Publicación de todas las definiciones que veo en firebug.

    footer {
        background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
        background-position: center center;
        background-repeat: repeat;
        clear: both;
        height: 50px;
        position: relative;
        width: 100%;
    }
    
    footer {
        background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
        background-position: center center;
        background-repeat: repeat;
        bottom: 0;
        height: 50px;
        left: 0;
        position: absolute;
        width: 100%;
    }
    
    footer {
        display: block;
    }

    Y puede eliminar el 1er conjunto de definiciones y el último con «display:block» . Si usted puede encontrarlos en algún lugar.

    • Lo mismo, yo no creo que sea debido a que
    • también quitar «position: relative» de #pie de página. Con estos 2 cambios dije, el pie de página se fue derecho hacia abajo. [probado usando firebug]
    • No veo por qué la eliminación de la position: relative; sería arreglarlo 🙂 Sólo echar un vistazo a este artículo : ryanfait.com/sticky-footer.
    • Ok veo por qué es trabajo. tiene 2 #footer definición, y el «position: relative» uno está tomando mayor prioridad. Cuando se deshabilita, el «position: absolute; bottom: 0» se aplica. Primera definición en la línea 2581 y 2º en la línea 3119
    • Estoy usando preguntas de los medios, tal vez eso es lo que estamos viendo. Depende del tamaño de la pantalla, intente cambiar el tamaño del navegador 🙂
    • Le sugiero que empiece a usar firebug ( extensión de firefox ). Cosas como estas, será 10 veces más fáciles de detectar el uso de ella. [Mejor que el dev tools de el resto de los navegadores]
    • Estoy usando Chrome, es de la consola, y Firebug Poco.
    • Bien, como he dicho, puedo ver 2 diferentes definiciones de #pie de página, y uno de ellos tiene «position: relative», cuando se desactiva la propiedad, el problema que tiene es fijo.
    • Estoy buscando pero no los puedo ver 😐
    • He añadido el código que ve en firebug, la esperanza de que usted será capaz de localizar.
    • Eso es raro, porque yo no tengo nada como eso en mi CSS, quizás es porque de las consultas de medios. Voy a tratar de agregar la misma cosa para todos los MQs. Espero que va a solucionarlo. También tengo otro problema, si se mira con detenimiento el contenido de la página de INICIO, verás que el título se distanció mucho, se supone que deben estar justo debajo de la cabecera, pero hay un gran espacio que hay sobre 70px cosa, y yo también no puede ver dónde está el problema aparece, puede tomar un breve vistazo ?
    • O usted puede añadir «position: absolute !importante;» si usted es incapaz de localizar. Por cierto, todos sus elementos tienen 2 definiciones diferentes, es mejor comprobar que fuera y la revisión, antes de la fijación de otras cosas.
    • Qué hacer si la posición relativa div fue dinámico tamaño?
    • podría usted por favor enviar una nueva pregunta o proporcionar un enlace a su página actual cuando se requiere.

  3. 2

    Uso de css tablas:

    FIDDLE1 – poco contenido

    FIDDLE2 – poco contenido + grande de pie de página

    FIDDLE3 – gran cantidad de contenido

    Marcado

    <header class="row">header content</header>
    <div class="row">content here</div>
    <footer class="row">footer content</footer>

    CSS

    html {
        height:100%;
        width:100%;
        }
    body {
        height:100%;
        width:100%;
        display:table;
        table-layout:fixed;
        margin:0 auto;
        }
    .row {
        display:table-row;
        background:orange
    }
    div.row {
        height:100%;
        background:pink
    }
    • Muchas gracias, por favor explique ¿cuál es el problema?
    • Lo siento, pero la pregunta que responde la recompensa fue totalmente una cuestión diferente de la original. Por desgracia, no puede migrar respuestas a través de preguntas, y yo no quiero quitarle la recompensa que usted trabaja. Voy a dejar que usted decida si desea mantener la respuesta de la recompensa, o si desea eliminar su respuesta.
    • Véase también el comentario que acaba de salir de la original asker.
  4. -4

    Trate de añadir

    .footerClass {
         position:absolute;
         bottom:0;
    }

    a tu archivo css y agregar la clase footerClass para el pie de página de la etiqueta

    • Sí, yo estoy usando ahora, pero quiero posición es relativa, porque el contenido que va a ser sensible y vertical de desbordamiento puedan aparecer.
    • Por lo que el pie de página para que la estancia de la estancia «por encima» de los contenidos que se desborden debajo del pie de página, de modo que el pie de página siempre está visible?
    • Que puedo hacer es mantenerse por encima de los contenidos con un z-index, lo que yo quiero es el contenido para empujar el pie hacia abajo, y el contenido a ser siempre el 100% de altura, de manera que empuja el pie de página en la parte inferior de la página, no importa lo que está dentro de los contenidos.
    • Bueno, yo aún iba con absoluta-posicionamiento, pero también me gustaría colocar el contenido a ser 50px arriba de la parte inferior y todo el espacio que necesita, desde la parte superior (position:absolute;parte inferior:50px;top:50px;)
    • Bueno, ya está haciendo que en mi localhost. Parece que no hay forma de evitar, solo puedo utilizar el posicionamiento absoluto.

Dejar respuesta

Please enter your comment!
Please enter your name here