CSS 100% de altura con relleno / margen


Answers

Hay una nueva propiedad en CSS3 que puede usar para cambiar la forma en que el modelo de caja calcula el ancho / alto, se llama tamaño de caja.

Al establecer esta propiedad con el valor "border-box", hace que el elemento al que lo aplique no se estire cuando agrega un relleno o borde. Si define algo con un ancho de 100 píxeles y un relleno de 10 píxeles, seguirá teniendo 100 píxeles de ancho.

box-sizing: border-box;

Vea aquí para soporte de navegador . No funciona para IE7 y IE7.js , sin embargo, creo que IE7.js Dean Edward agrega soporte para ello. Disfruta :)

Question

Esto me ha estado volviendo loco durante un par de días, pero en realidad es un problema con el que me he equivocado durante los últimos años: con HTML / CSS, ¿cómo puedo hacer un elemento que tenga un ancho y / o altura que es el 100% de su elemento principal y aún tiene el relleno o los márgenes adecuados?

Con "apropiado" me refiero a que si mi elemento padre es 200px alto y especifico height = 100% con padding = 5px esperaría que obtuviera un elemento alto de 190px con border = 5px en todos los lados, bien centrado en el elemento padre .

Ahora, sé que no es así como el modelo de caja estándar especifica que debería funcionar (aunque me gustaría saber por qué, exactamente ...), por lo que la respuesta obvia no funciona:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

Pero me parece que debe haber ALGUNA forma de producir de manera confiable este efecto para un padre de tamaño arbitrario. ¿Alguien sabe de una manera de lograr esta tarea (aparentemente simple)?

Ah, y para que conste en acta, no estoy muy interesado en la compatibilidad con IE, por lo que (afortunadamente) debería facilitar un poco las cosas.

EDITAR: desde que se pidió un ejemplo, este es el más simple que puedo pensar:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

El desafío es lograr que aparezca la caja negra con un relleno de 25 píxeles en todos los bordes sin que la página crezca lo suficiente como para requerir barras de desplazamiento.




La mejor manera es con la propiedad calc (). Entonces su caso se vería así:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

Simple, limpio, sin soluciones. Solo asegúrese de no olvidar el espacio entre los valores y el operador (por ejemplo, (100% -5px) que romperá la sintaxis. ¡Disfrútelo!




Otra solución: puede usar unidades porcentuales para los márgenes y tamaños. Por ejemplo:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

El problema principal aquí es que los márgenes aumentarán / disminuirán ligeramente con el tamaño del elemento padre. Es de suponer que la funcionalidad que prefiera es que los márgenes se mantengan constantes y el elemento hijo crezca o se reduzca para completar los cambios en el espaciado. Entonces, dependiendo de cuán apretada necesite su pantalla, podría ser problemático. (También iría por un margen más pequeño, como 0.3%).




  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>



El ejemplo de Frank me confundió un poco; no funcionó en mi caso porque todavía no entendía el posicionamiento lo suficientemente bien. Es importante tener en cuenta que el elemento del contenedor principal debe tener una posición no estática (mencionó esto, pero lo pasé por alto, y no fue en su ejemplo).

Aquí hay un ejemplo en el que el relleno y el borde de un niño usan posicionamiento absoluto para llenar al padre al 100%. El padre usa el posicionamiento relativo para proporcionar un punto de referencia para la posición del niño mientras permanece en el flujo normal; el siguiente elemento "más contenido" no se ve afectado:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

Un link útil para aprender rápidamente el posicionamiento de CSS




Otra solución es usar display: table que tiene un comportamiento de modelo de caja diferente.

Puede establecer un alto y un ancho para el elemento primario y agregar relleno sin expandirlo. El niño tiene 100% de alto y ancho menos los almohadones.

JSBIN

Otra opción sería usar propiedad de tamaño de caja. El único problema con ambos sería que no funcionan en IE7.






Related



Tags

css css