我需要将 subfooter div 保留在 childbox div 的底部，就像页脚一样。这里是 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;
}
目前您已经在您的 css 中设置了 vertical-align: middle 导致您的子元素出现在屏幕中间。
* {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>关于html - 将子div放在父div的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41438130/