英文:
Using height 100% of parent without explicitly defining height of parent
问题
height: calc(100% - 5px); 不起作用，即使为 html body 和 parent 标签 设置 height: 100% 也是如此。 我不想明确以像素定义父元素的高度，而是希望它适应其内容（采用表格的高度）。 我不希望 child100 的位置是绝对的，因为 parent div 是一个非常长的带有溢出的元素的一部分，当滚动时，它将卡在 table 旁边，而不是在其上面。 此外，省略 .child100 的 height 属性，并为其他子元素添加 margin-bottom: -5px 将影响整个 parent 元素的高度，如背景颜色所示。
英文:
I have this very simple snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.parent {
display: flex;
background-color: blue;
}
.child100 {
width: 6px;
height: calc(100% - 5px);
background-color: red;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
height: calc(100% - 5px); doesn't take any effect, also if I set height: 100% for html body and parent tags.<br>
I don't want to explicitly define the height of parent in pixels, rather I want it to fit its content (taking the height of table).<br>
I don't want the position of child100 to be absolute as the parent div is part of a very long element with overflow and that will stuck child100 ontop when scrolling, rather than being next to table.<br>
Also, omitting height attribute for .child100 and adding margin-bottom: -5px for the other child will affect the height of the whole parent element as seen by the background-color.
答案1
得分: 2
Remove the height definition and add a bottom margin. The stretch alignment of flexbox will do the job for you.
.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>
英文:
Remove the height definition and add a bottom margin. The stretch alignment of flexbox will do the job for your.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.parent {
display: flex;
background-color: lightblue;
}
.child100 {
width: 6px;
margin-bottom: 5px;
background-color: red;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论