将child div保留在父div的底部 [英] Keep child div on the bottom of parent div
本文介绍了将child div保留在父div的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要保持 subfooter div在底部 childbox div像footer.Here是< a href =http://jsfiddle.net/VsakD/1694/ =nofollow noreferrer> jsfiddle
I need to keep the subfooter div on the bottom of childbox div like a footer.Here is the jsfiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
keep on bottom of box
</div>
</div>
</div>
</body>
</html>
推荐答案
使用以下css：
.parentbox:before {
vertical-align: bottom;
}
.childbox {
vertical-align: bottom;
}
目前您已设置 vertical-align：middle 使您的子元素出现在屏幕中间。
Currently you have set vertical-align: middle in your css causing your child element to appear in middle of screen.
* {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;
}
<div class="parentbox">
<div class="childbox">
I shall be in the bottom of parentbox regardless of its size!
</div>
</div>
这篇关于将child div保留在父div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
