仅限 CSS： <div> 填充 <the> 父级

Question

我需要红色 div 用蓝色背景填充父级。 http://jsfiddle.net/jiantongc/kyR8q/

在.rowlevel2-deco 上尝试了各种修复，但没有奏效： height:100%;box-sizing: border-box;等

类似的问题：Chrome doesn't honor row height if rowspan is present 但没有实际的工作解决方案。

Answer 1

您可以将height="1" 添加到th：

<th rowspan="2" class="rowlevel2" height="1">

比有一个小的填充，通过添加padding:0;去掉它：

.rowlevel2 {
     background: blue; /* don't want to see blue */
     padding: 0;    
 } 

更新 Chrome 和 FireFox

Short：为所有从内容高度获取高度并且没有明确定义高度的父元素显式指定高度。

Long：This、this 让我觉得这是不可能的。但是this test 在 FF 中有效，在 Chrome 中无效。此代码适用于以下两种情况：

* { padding:0; } /* All paddings be gone! This is not a padding problem */

table { height: 1px; } /* FF needs a height */

.foo {
    background: blue; /* Don't want to see blue */
    height: 100%; /* FF needs a height agian */
}

.bar {
    background: red;
    height:100%;
    width: 100px;
    display:inline-block; /* Chrome needs inline-block, FF doesn't care. */
}

.bar:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

.ni {
    background: gray;
    width:120px;
    height:40px;
}

HTML：

<table>
    <thead>
        <tr>
            <th rowspan="2" class="foo">
                <div class="bar">Bar</div>
            </th>
            <th>
                <div class="ni">Knight 1</div>
            </th>
        </tr>
        <tr>
            <th>
                <div class="ni">Knight 2</div>
            </th>
        </tr>
    </thead>
</table>

http://jsfiddle.net/allcaps/V7jzL/2/

它也适用于your class names ;)。

<percentage> 指定百分比高度。百分比是 根据生成框的高度计算 包含块。如果包含块的高度不是 明确指定（即，它取决于内容高度），并且这个 元素不是绝对定位的，值计算为'auto'。

表格高度取决于内容高度 == auto。因此 Mozilla 希望在父元素上明确定义高度。 table { height: 1px; } 和 .foo { height: 100%; } does that.1px;` 是一个小于任何普通表格的值，并且无论如何内容高度优先。将表格推到合适的大小。

感谢@bjb568 提供display:inline-block;。
感谢@KingKing .bar:before { content:''; ... }。

Answer 2

为什么不使用 jQuery？

$(document).ready( function() {
    $('.rowlevel2-deco').
      css({
        'width': $('.rowlevel2').width(),
        'height': $('.rowlevel2').height()  
    });
});

在红色div中垂直对齐：

.rowlevel2-deco {
    background: red;
    display:table-cell;
    vertical-align: middle;
}

View it here

Answer 3

.rowlevel2-deco{
    display: inline-block;
    padding: 0;
}

似乎有效。 http://jsfiddle.net/kyR8q/27/ 另外，垂直居中使用：

.rowlevel2-deco:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Answer 4

100% 高度适用于绝对定位的元素。所以 CSS 将是：

th.rowlevel2{
    background: blue; /* don't want to see blue */
    width: 100px;
    position: relative;
}

.rowlevel2-deco{
    background: red;
    height:100%;
    width: 100px;
    position: absolute;
    top: 0;
}

但在这种情况下，父级必须定义宽度。

http://jsfiddle.net/aLQh7/1/