“显示器：表格单元格”的孩子的100％高度。 [英] 100% height on child of "display: table-cell"

问题描述

我拿了一张我找到的定价表HTML / CSS / JS，并决定尝试将它弯曲以符合我对给定页面的期望。不幸的是我碰到了一堵墙。下面的小提琴现在是表格的HTML和CSS的简单示例：

现在我需要的是为这个表格单元格的子元素填充高度（在上面提供的Fiddle中，这将是 .price-wrapper - 并且它需要填充 .price-list li ）

我已经尝试了两种方法：

1. height：100％


2. position：absolute;顶部：0;底部：0;左：0;正确：0;





前者由于某种原因不做任何事情，后者则崩溃 .price-list 降至0像素高（因为只有身高的孩子绝对定位并因此从流中移除）



如果我可以将 .price-wrapper 正确地设置为 .price-list li 的高度的100％，那么I可以使用 display：table 和 display：table-row 将立即购买按钮放到底部并获取所需的外观：





解决方案

一个解决方案是将100％高度给予 .price-list ， .price-list> li 和 .price-wrapper 会让孩子身高适合内容。

  .price-list {
 display：table; 
身高：100％; // Here 
 list-style：outside none none; 
保证金：0; 
 padding：0; 
 table-layout：fixed; 
宽度：100％; 
} 
 
 .price-list> li {
 display：table-cell; 
 padding：0 10px; 
身高：100％; //这里
} 
 
 .price-wrapper {
 background-color：#fff; 
身高：100％; // Here 
 list-style：outside none none; 
保证金：0; 
 padding：0; 
} 
  

工作小提琴




I took a pricing table HTML/CSS/JS that I found and decided to try and bend it to fit my desires for a given page. Unfortunately I've hit a bit of a wall. The following fiddle is a bare-bones example of the HTML and CSS for the table at the moment:

https://jsfiddle.net/jv89hopf/1/

In order to make the columns evenly space out across the width of the page regardless of the number of columns I used display:table, table-layout:fixed, and display:table-cell. This works perfectly and as I add or remove columns the table adjusts as necessary to fill the space

Now the problem is when one column is taller than the others. I would like all columns to stretch to match the height of the tallest one.

When looking in the Chrome inspector I can see that the table-cell has filled the height entirely:

Now all I need is for the child of this table-cell to fill the height (in the Fiddle provided above, this would be .price-wrapper - and it needs to fill .price-list li)

I have tried both:

1. height: 100%
2. position: absolute; top:0; bottom:0; left:0; right:0;

The former does nothing for some reason, and the latter collapses .price-list down to 0 pixels tall (since the only children with height are absolutely positioned and therefore removed from the flow)

If I can get .price-wrapper to be properly 100% of the height of .price-list li then I can use display:table and display:table-row to push the "Buy now" button to the bottom and get the desired appearance:

解决方案

One solution is give 100% height to .price-list, .price-list > li and .price-wrapper will make child height fit to content.

.price-list {
    display: table;
    height: 100%; //Here
    list-style: outside none none;
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}

.price-list > li {
  display: table-cell;
  padding: 0 10px;
  height:100%; //Here
}

.price-wrapper {
    background-color: #fff;
    height: 100%; //Here
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

Working Fiddle

这篇关于“显示器：表格单元格”的孩子的100％高度。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！