html - 放置内部在父母的底部. 父母身高由其“最高”兄弟的高度设置
. 父母身高
由其“最高”兄弟的高度设置
问题描述
设置：
- 我有一排有多个
<div class="container"> - 这些
<div class="container">在另一个内部彼此相邻<div class="supercontainer"> - 每个
<div class="container">都有 3 个相互重叠的内部 div：<div class="title">,<div class="content">,<div class="footer">
期望的结果：
- 都
<div class="container">具有相同的高度。高度没有以 px 为单位定义，它将是其中“最高”的高度。 <div class="title">应该在顶部<div class="container"><div class="content">应该放在下面<div class="title"><div class="footer">应该放在<div class="container">不与前面内容重叠的底部
这是当前状态：https ://codepen.io/xavier-atero/pen/ExvWQww
.supercontainer {
border: solid 1px black;
display: flex;
}
.container, .other-container {
position: relative;
border: solid 1px red;
width: 200px;
margin: 10px;
}
.title {
margin: 10px;
border: solid 1px blue;
}
.content {
margin: 10px;
border: solid 1px cyan;
}
.footer {
margin: 10px;
background: lime;
}<body>
<div class="supercontainer">
<div class="container">
<div class="title">
This part represents the title and it is placed on top
</div>
<div class="content">
This one represents the body and it is placed below the title
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
<div class="other-container">
<div class="title">
This part represents the title and it is placed on top.
</div>
<div class="content">
This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
</div>
</body>这是响应https://stackoverflow.com/a/2147358/10850340之后的结果。
https://codepen.io/xavier-atero/pen/WNEpJNJ（与内容重叠）
.supercontainer {
border: solid 1px black;
display: flex;
}
.container, .other-container {
position: relative;
border: solid 1px red;
width: 200px;
margin: 10px;
}
.title {
margin: 10px;
border: solid 1px blue;
}
.content {
margin: 10px;
border: solid 1px cyan;
}
.footer {
margin: 10px;
background: lime;
position: absolute;
bottom: 0;
}<body>
<div class="supercontainer">
<div class="container">
<div class="title">
This part represents the title and it is placed on top
</div>
<div class="content">
This one represents the body and it is placed below the title
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
<div class="other-container">
<div class="title">
This part represents the title and it is placed on top.
</div>
<div class="content">
This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
</div>
</body>先感谢您！