La página web en cuestión se parece a esto:

//The Header //
/*            */
/*  CONTENT   */
/*            */
//The footer //

El encabezado y el pie de página se han fijado las alturas. Digamos por ejemplo que ambos tienen una altura de 20 píxeles. Necesito configurar el contenido de la altura a 100% menos 40px (encabezado + pie de las alturas). Sé que puedo hacer esto fácilmente con JavaScript, pero sería genial para aprender a hacerlo solo con CSS, si es posible.

InformationsquelleAutor JCOC611 | 2011-01-03

5 Comentarios

  1. 9
    #header /* hypothetical name */
    {
        height:100%;
    }
    
    #header p /* or any other tag */
    {
        margin:20px 0 20px 0;
    }

    Sólo asegúrese de no colocar margen de altura y en la misma etiqueta. Usted experimentará resultados locos.

    • hey, es un poco de trabajo…pero estoy teniendo un problema. Digamos que quería establecer un div dentro de los contenidos a una altura de 100% en relación a la altura de contenido…¿cómo?
    • sólo ten cuidado con el margen de contracción.
    • asegúrese de position: relative se establece en el elemento primario cuando se desea utilizar el ajuste de tamaño relativos.
    • gracias chicos. Aunque me he decidido a usar JS, voy a aceptar esta respuesta, ya que es la mejor solución CSS 🙂
    • Es complicado ayudar con css sin ejemplo práctico sobre la marcha. Colocar un div dentro del contenido no debe dar ningún problema, asegúrese de que la altura del 100% bien. No sé si me estoy imaginando el problema correctamente.
    • margin: 20px 0 hace lo mismo (menos es más)
    • ¿Cuál es la magia de aquí? No pude hacer que funcione. Parece tan simple.

  2. 28

    Si tu navegador soporta CSS3, trate de usar el CSS del elemento Calc()

    height: calc(100% - 65px);

    también puede ser que desee agregar compatibilidad del navegador opciones:

    height: -o-calc(100% - 65px); /* opera */
    height: -webkit-calc(100% - 65px); /* google, safari */
    height: -moz-calc(100% - 65px); /* firefox */
    • altura: -webkit-calc(100% – 65px); NO funciona en Safari 5.1.7. ¿Conoces alguna solución para esto?
    • a menos que los píxeles de la parte inferior, ¿cómo puedo menos que desde el principio?
  3. 3

    Lugar una posición fija en el encabezado y el pie de página y configurarlas para que se adhieren a la parte superior de la parte inferior de la ventana, respectivamente. A continuación, coloque un relleno superior e inferior en el área de contenido de 20px.

    #header{position:fixed;top:0}
    #footer{position:fixed;bottom:0}
    #content{padding:20px 0}
    • Esta es la mejor solución. no atornillar con CSS cálculos que no son compatibles en todos los navegadores o en porcentajes. Esto es perfecto!
  4. 3

    Marnix la respuesta implica el uso del relleno superior e inferior del elemento de contenido de las minas; implica el uso de la parte superior y la parte inferior de la frontera.

    Me topé con esta solución en mi propio tiempo tratando de averiguar cómo hacer algo similar sin recurrir a las tablas: hacer que el elemento central de la altura de la 100%, pero, a continuación, establezca el cuadro de tamaño de modelo de «border-box» (de modo que la altura no sólo incluye el contenido dentro de la caja, pero también los bordes de la caja), hacer la parte superior y la parte inferior bordes muy gruesos (como, por ejemplo, 20px), a continuación, utilice fija la posición de la superposición de encabezado y pie de página sobre el loco-de espesor superior e inferior de las fronteras del elemento central.

    Aquí está mi ejemplo de CSS:

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #content {
        height: 100%;
    
        -moz-box-sizing: border-box;
        box-sizing: border-box;
          /* Ensure that the height of the element includes the
             box border, not just the content */
    
        border: 0;
        border-top: 20px solid white;
        border-bottom: 20px solid white;
          /* Leave some space for the header and footer to
             overlay. */
    }
    #header,
    #footer {
        position: fixed;
        left: 0;
        right: 0;
        height: 20px;
        background-color: #eee;
          /* Specify a background color so the content text doesn't
             bleed through the footer! */
    }
    #header {
        top: 0;
    }
    #footer {
        bottom: 0;
    }

    Esto funciona en Google Chrome 24 para Mac. Yo no lo he probado en otros navegadores, aunque.

    Esperemos que esto ayude a alguien que todavía se enfrenta a la tentación de usar sólo una mesa y obtener el diseño de la página ya se ha realizado. 🙂

  5. 1

    Este ejemplo parece mostrar la más sólida de manera de hacer esto. En realidad, es un poco buggy en IE, porque el cambio de tamaño va mal a veces.
    Es decir, cuando se hace un cambio de tamaño de la esquina inferior derecha y acaba de hacer un redimensionamiento vertical con la mano (muy difícil de hacer a veces), la página no se actualizará en el IE. Yo tenía el mismo problema con este y solo se fija con JS después de todo, porque de otros eventos en mi página web.

    http://www.xs4all.nl/~peterned/examples/csslayout1.html

Dejar respuesta

Please enter your comment!
Please enter your name here