我有这个非常简单的片段:
.parent {
display: flex;
background-color: blue;
}
.child100 {
width: 6px;
height: calc(100% - 5px);
background-color: red;
}
<body>
<div class="parent">
<div class="child100"></div>
<div class="childContent">
<table>
<tr>
<th>
1
</th>
<th>
2
</th>
</tr>
<tr>
<th>
3
</th>
<th>
4
</th>
</tr>
</table>
</div>
</div>
</body>
height: calc(100% - 5px);
没有任何效果,如果我将 height: 100%
设置为 html body and parent tags
.child100
的位置是绝对的,因为 parent
div 是一个非常长的溢出元素的一部分,滚动时会卡在 child100
上,而不是在 table
旁边。height
的 .child100
属性并为另一个孩子添加 margin-bottom: -5px
将影响背景颜色所见的整个 parent
元素的高度。
删除高度定义并添加底部边距。 flexbox 的拉伸对齐将为您完成这项工作。
.parent {
display: flex;
background-color: lightblue;
}
.child100 {
width: 6px;
margin-bottom: 5px;
background-color: red;
}
<body>
<div class="parent">
<div class="child100"></div>
<div class="childContent">
<table>
<tr>
<th>
1
</th>
<th>
2
</th>
</tr>
<tr>
<th>
3
</th>
<th>
4
</th>
</tr>
</table>
</div>
</div>
</body>