使用父元素的高度百分比而不明确定义父元素的高度

huangapple
go评论87阅读模式
英文:

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

  1. .parent {
  2.   display: flex;
  3.   background-color: blue;
  4. }
  6. .child100 {
  7.   width: 6px;
  8.   height: calc(100% - 5px);
  9.   background-color: red;
  10. }

<!-- language: lang-html -->

  1. &lt;body&gt;
  2.   &lt;div class=&quot;parent&quot;&gt;
  3.     &lt;div class=&quot;child100&quot;&gt;&lt;/div&gt;
  4.     &lt;div class=&quot;childContent&quot;&gt;
  5.       &lt;table&gt;
  6.         &lt;tr&gt;
  7.           &lt;th&gt;
  8.             1
  9.           &lt;/th&gt;
  10.           &lt;th&gt;
  11.             2
  12.           &lt;/th&gt;
  13.         &lt;/tr&gt;
  14.         &lt;tr&gt;
  15.           &lt;th&gt;
  16.             3
  17.           &lt;/th&gt;
  18.           &lt;th&gt;
  19.             4
  20.           &lt;/th&gt;
  21.         &lt;/tr&gt;
  22.       &lt;/table&gt;
  23.     &lt;/div&gt;
  24.   &lt;/div&gt;
  25. &lt;/body&gt;

<!-- 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.

  1. .parent {
  2.   display: flex;
  3.   background-color: lightblue;
  4. }
  6. .child100 {
  7.   width: 6px;
  8.   margin-bottom: 5px;
  9.   background-color: red;
  10. }
  1. <body>
  2.   <div class="parent">
  3.     <div class="child100"></div>
  4.     <div class="childContent">
  5.       <table>
  6.         <tr>
  7.           <th>1</th>
  8.           <th>2</th>
  9.         </tr>
  10.         <tr>
  11.           <th>3</th>
  12.           <th>4</th>
  13.         </tr>
  14.       </table>
  15.     </div>
  16.   </div>
  17. </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 -->

  1. .parent {
  2.   display: flex;
  3.   background-color: lightblue;
  4. }
  6. .child100 {
  7.   width: 6px;
  8.   margin-bottom: 5px;
  9.   background-color: red;
  10. }

<!-- language: lang-html -->

  1. &lt;body&gt;
  2.   &lt;div class=&quot;parent&quot;&gt;
  3.     &lt;div class=&quot;child100&quot;&gt;&lt;/div&gt;
  4.     &lt;div class=&quot;childContent&quot;&gt;
  5.       &lt;table&gt;
  6.         &lt;tr&gt;
  7.           &lt;th&gt;
  8.             1
  9.           &lt;/th&gt;
  10.           &lt;th&gt;
  11.             2
  12.           &lt;/th&gt;
  13.         &lt;/tr&gt;
  14.         &lt;tr&gt;
  15.           &lt;th&gt;
  16.             3
  17.           &lt;/th&gt;
  18.           &lt;th&gt;
  19.             4
  20.           &lt;/th&gt;
  21.         &lt;/tr&gt;
  22.       &lt;/table&gt;
  23.     &lt;/div&gt;
  24.   &lt;/div&gt;
  25. &lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月14日 22:18:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76247941.html
  • css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定