Question

我将div设置为表格，将child-div设置为表格单元格。我需要表格单元格（在本例中为#tv）为父级（#news）的100％。我的.news-inner div将根据所包含的内容（可能为6 li，可能为20）在高度上交替变换。我不确定缺少什么，而且我确信这是一件非常容易的事情，我在凌晨四点到四点都被忽略了。

我更喜欢没有像本问题How to make a div inside a table cell "height: 100%"中提供的答案之一那样涉及JavaScript的解决方案。 CSS首选，但我不是独裁者

JSFiddle

<div class="box" id="news">
    <div class="news-inner">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <div id="tv">
        test
    </div>
</div>

最后，

* { box-sizing: border-box; }
#news { width: 800px; background: #ccc; }
#news .news-inner {width: 75%; display: inline-block; }
#news ul { list-style: none; width: 100%; padding: 15px; font-size: 0;  }
#news ul li { font-size: 14px; display: inline-block; width: 50%; height: 150px; vertical-align: top }
#news ul li:nth-child(1) { background: #c6c; }
#news ul li:nth-child(2) { background: #000; }
#tv { width: 25%; height: 100%; display: block;  background: #c6c; float: right; }

Answer 1

我已将display:table添加到#news，并从#tv添加了float:right;display:block并添加了display:inline-block。

另请注意删除空白的 HTML注释。

* { box-sizing: border-box; }
#news { width: 800px; background: #ccc; display:table }
#news .news-inner {width: 75%; display: inline-block; }
#news ul { list-style: none; width: 100%; padding: 15px; font-size: 0;  }
#news ul li { font-size: 14px; display: inline-block; width: 50%; height: 150px; vertical-align: top }
#news ul li:nth-child(1) { background: #c6c; }
#news ul li:nth-child(2) { background: #000; }
#tv { width: 25%; height: 100%; background: #c6c; display: inline-block; vertical-align:top; }

<div class="box" id="news">
    <div class="news-inner">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div><!--
    --><div id="tv">
        test
    </div>
</div>

JSFiddle

Fiddle with 20 li elements

表格细胞DIV高度为父母的100％

1 个答案: