我有一个特定的HTML片段，我试图将其与父母的底部对齐。然而，父母的身高是未知的。绝对定位不起作用，因为高度未知（相信我，我已经尝试了广泛记录的相对位置与绝对子元素和底部：0）。相关内容位于侧栏内，如下图所示：
------------------
| stuff |con|
| stuff |ten|
| stuff | |
| | |
| |bot| <--- This is what I want to align to the bottom
------------------
这可能是一个聪明的解决方案吗？
编辑：
在这种情况下，绝对位置不起作用。需要与底部对齐的内容可能比左列内的内容大，这将有效地创建：
------------------
| stuff |con|
| stuff |ten|
| stuff | |
| | |
| |bot|
-------------|bot|
|bot|
|bot| <--- Unintended trailing...
答案 0 :(得分：3)
设置div容器（父div）：position:relative;
然后设置按钮CSS：
position:absolute;
right:0;
bottom:0;
答案 1 :(得分：1)
您可以在父元素中使用display: table，然后设置您尝试在属性display: table-cell和vertical-align: bottom底部对齐的孩子。
答案 2 :(得分：1)
Flexbox可以做到这一点。
首先，我们将display:flex应用于整体父级＆＃34;行＆＃34;。这使两列的高度相等。
然后我们也将display:flex应用于侧栏但使用flex-direction:column。
最后，正如Oriol在评论中所提到的，我们将margin-top:auto应用于我们的元素，使其位于侧边栏的底部，这样无论该侧边栏的内容如何，它都会一直推向底部。
* {
box-sizing: border-box;
}
.parent {
border: 1px solid red;
margin-bottom: 1em;
display: flex;
}
main {
background: lightgreen;
flex: 0 0 75%;
}
aside {
flex: 0 0 25%;
padding: .5em;
display: flex;
flex-direction: column;
background: #c0ffee
}
.bottom {
height: 15px;
background: pink;
margin-top: auto;
}<div class="parent">
<main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, delectus explicabo facere veritatis culpa soluta laborum expedita, aliquam consequuntur quos eos molestias similique, impedit consectetur veniam quasi! Adipisci, voluptas qui dolore
explicabo voluptatem nobis aspernatur eligendi sapiente modi consequuntur asperiores laboriosam voluptate reprehenderit id, odit repellendus rem autem vero magni?</main>
<aside>
Lorem ipsum dolor sit amet.
<div class="bottom"></div>
</aside>
</div>
<div class="parent">
<main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, voluptatem.</main>
<aside>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quae consequatur aut magni quisquam molestiae
<div class="bottom"></div>
</aside>
</div>
答案 3 :(得分：0)
<html>
<head>
<title>Demo</title>
<style>
.parentDiv{
width:100px;
height:auto;
position:relative;
border:1px solid gray;
}
.buttonTest{
width:50px;
height:30px;
position:absolute;
bottom:0;
right:0;
}
</style>
</head>
<body>
<div class="parentDiv">
Demo
<br/>
<br/>
<br/>
<br/>
<input type="submit" class="buttonTest" value="Button"/>
</div>
</body>
</html>
这里是您的演示代码
答案 4 :(得分：-1)
你在这里： -
#parentDiv{
width: 1200px;
height: auto;
display: block;
top: 0;
float: none;
margin: 0 auto;
background-color: #99d4ff;
min-height:100%;
//display: flex;
}
#bottomBox{
position: relative;
float: bottom;
width: 300px;
height: 250px;
margin-left: 750px;
overflow: hidden;
} <div id="parentDiv">
<div style="width:750px;overflow: hidden;margin-right: 0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
<div id="bottomBox">
<p>Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here</p>
</div>
</div>