Question

我需要将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>

Answer 1

使用以下css：

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

目前，您已在css中设置vertical-align: middle，导致您的子元素显示在屏幕中间。

＆＃13;

* {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;
}

＆＃13;

<div class="parentbox">
  <div class="childbox">
    I shall be in the bottom of parentbox regardless of its size!
  </div>
</div>

＆＃13;

Answer 2

根据CSS规范，父级必须设置为position: relative，子级可以设置为position: absolute或fixed

为了您的娱乐而改进的小提琴，知道这个问题的答案几乎可以在本网站和互联网上找到。定位，就是这个词。

JSFiddle

此外，关于定位文章的一个很好的链接可能会有所帮助。 Positioning

Answer 3

这里也许有帮助。

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;}

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

它有很多方法可以回答。

位置绝对，并将底部设为0。
显示flex并设置对齐项目或对齐自己

您需要了解有关css的更多信息。希望它有所帮助。

Answer 4

您不需要添加伪元素，只需添加位置样式即可。

.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;
}

<div class="parentbox">
  <div class="childbox">
    I shall be in the middle of parentbox regardless of its size!
  </div>
</div>

Answer 5

这是你的答案，通过CSS本身，你可以做到这一点。

＆＃13;

.parentbox{
  height: 300px;
  width: 200px;
  background-color: #990000;
  position: relative;
}
.childbox{
  color: #fff;
  background-color: #000;
  position: absolute;
  bottom: 0;
  padding: 10px;
}

＆＃13;

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

＆＃13;

Answer 6

请尝试一次..

<强> HTML

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

<强> 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;
}

我希望它对你有所帮助

Answer 7

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

有很多方法可以解决你的需求。希望它可以给你一些提示

将子div保留在父div的底部

7 个答案: