Pregunta Hacer elemento hijo (con relleno) 100% ancho y alto de padre


¿Es posible hacer un elemento hijo (con relleno) 100% de ancho y alto de su elemento padre?

html:

 <div id="parent">
       <div id="child"></child>
    </div>

css:

  #child {
    padding: 15px
    }

He intentado hacer que el niño sea 100% ancho / alto, pero esto hace que el niño sea más grande que el padre debido al relleno.

También he intentado hacer que la posición del niño sea absoluta y establecer arriba, abajo, izquierda y derecha en 0 y esto funciona para el ancho pero no para la altura.

El padre puede ser de un tamaño variable.

Además necesita trabajar en IE8.


5
2018-05-23 09:32


origen


Respuestas:


Necesitas usar el box-sizing: border-box; propiedad:

#child {
    padding: 15px
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

4
2018-05-23 09:35



Propiedad de tamaño de caja

Puedes usar el box-sizing propiedad para eso Me gusta esto :

#child{
    box-sizing:border-box;
    padding:15px;
    width:100%;
    height:100%;
}

MANIFESTACIÓN

Esta propiedad incluye el relleno (y el borde, si tiene alguno) del ancho total del niño para que no se desborde el contenedor incluso si configura width:100%; y darle un poco de relleno.

Más información sobre esta propiedad en MDN 

Esta propiedad es compatible con IE8 +, pero necesitará la -moz- prefijo para soportar FF28 - ver Puedo usar para más información.

% relleno

Si puede usar el porcentaje de relleno, puede hacer este cálculo para que el elemento hijo tenga el mismo tamaño que el padre sin el box-sizing propiedad.

Cálculo para el ancho:

width of child +  left and right padding child = 100%

Cálculo para la altura:

height of child +  top and bottom padding child = 100%

ejemplo:

#child {
    padding: 5%;
    width:90%;
    height:90%;
}

MANIFESTACIÓN


2
2018-05-23 09:36



Intenta cambiar el modelo de caja para usar box-sizing: border-box;

* {
  box-sizing: border-box;
}

Es posible que necesite usar http://modernizr.com/ para soporte con IE8.

Tabla de compatibilidad para tamaño de caja


1
2018-05-23 09:37