Mantenga div hijo en la parte inferior de div padre

Necesito mantener el div subfooter en la parte inferior del div de childbox como un pie de childbox Aquí está el jsfiddle

     Title  .parentbox { width:500px; height:400px; border-style:solid; text-align: center; /* align the inline(-block) elements horizontally */ } .parentbox:before { /* create a full-height inline block pseudo-element */ content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } .childbox { display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ padding: 5px; border: 2px solid black; }    
keep on bottom of box

Use el siguiente css:

 .parentbox:before { vertical-align: bottom; } .childbox { vertical-align: bottom; } 

Actualmente ha configurado vertical-align: middle en su CSS haciendo que su elemento hijo aparezca en el centro de la pantalla.

 * {box-sizing: border-box;} body {margin: 0;} .parentbox { width:500px; height:100vh; border-style:solid; text-align: center; /* align the inline(-block) elements horizontally */ } .parentbox:before { /* create a full-height inline block pseudo-element */ content: ' '; display: inline-block; vertical-align: bottom; /* vertical alignment of the inline element */ height: 100%; } .childbox { display: inline-block; vertical-align: bottom; /* vertical alignment of the inline element */ padding: 5px; border: 2px solid black; } 
 
I shall be in the bottom of parentbox regardless of its size!

Según la especificación de CSS, el padre debe establecerse en position: relative y el niño puede establecerse en position: absolute o fixed

El violín modificado para su diversión, sepa que la respuesta a esta pregunta se puede encontrar prácticamente en cualquier lugar, tanto en este sitio web como en Internet. Posicionamiento, esa es la palabra.

JSFiddle

Además, un buen enlace sobre un artículo sobre posicionamiento podría ser útil. Posicionamiento

aquí quizás sea de ayuda.

 html,body{ height:100%; margin:0; padding:0;} .parentbox{ background:#ccc; height:100%; display:flex; align-items:center; justify-content:center;} .childbox{ align-self:flex-end; background:#999;} 
 
I shall be in the middle of parentbox regardless of its size!

No necesita agregar el pseudo elemento para eso solo agregue estilo de posición y listo.

 .parentbox { width:500px; height:400px; border-style:solid; text-align: center; /* align the inline(-block) elements horizontally */ position: relative; } .childbox { display: block; padding: 5px; border: 2px solid black; position: absolute; left: 0; right: 0; bottom:0; margin: 5px; } 
 
I shall be in the middle of parentbox regardless of its size!

Aquí está su respuesta, a través de CSS sí puede lograr esto.

 .parentbox{ height: 300px; width: 200px; background-color: #990000; position: relative; } .childbox{ color: #fff; background-color: #000; position: absolute; bottom: 0; padding: 10px; } 
 
I shall be in the middle of parentbox regardless of its size!

Por favor, inténtalo una vez …

HTML

 
I shall be in the middle of parentbox regardless of its size!

CSS

 .parentbox { width: 500px; height: 400px; border-style: solid; text-align: center; position: relative; } .parentbox:before { /* create a full-height inline block pseudo-element */ content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } .childbox { display: inline-block; vertical-align: middle; padding: 5px; border: 2px solid black; position: absolute; bottom: 5px; left: 12% !important; } 

Espero que te sea útil

 .parentbox { position:relative; } .childbox { position: absolute; left: 0; right: 0; bottom: 0; } 

Hay muchos métodos para solucionar sus necesidades. Espero que pueda darle un consejo.