css – 如何将包含的浮动元素生长到其容器的整个高度？

2023年8月3日 207次阅读

我先问一下基本问题,然后再详细说明为什么我要问.我在< div>中有一堆类似的浮动块元素.我在< div>上设置了溢出：自动以便它的高度扩展到适当地包含其中的所有元素.

有没有办法,只使用CSS和HTML,只将第一个浮动元素设置为div的整个高度？

为了清楚起见：我希望将包含的元素增长到容器的高度,而不是相反.

我尝试添加

 height: 100%

到第一个浮动元素的CSS,但是没有效果.

关于令人难以忍受的细节.如果想出一个更好的整体方法,这将消除这个特殊问题,我全都耳朵.

我正在用一堆漂浮的< ul>来模拟一张桌子. < div>内的元素.每个列表都是“表”中的一列,第一个列表是行标签列.因此,要呈现以下内容：

         col A     col B
row 1     foo       baz

row 2     bar       bat

我用这个标记：

<div>
    <ul class='row-label'>
        <li>&nbsp;</li> *
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col A</li>
        <li>foo</li>
        <li>bar</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col B</li>
        <li>baz</li>
        <li>bat</li>
    </ul>
</div>

*在’行标签’列表的第一项中应该有一个不间断的空格,但我无法显示& nbsp;

细心的读者可能会疑惑“嗯？为什么不使用真正的桌子？”两个答案：

>对于我的数据,我的假表方法在语义上更合适.数据在每个“列”中比在每个“行”中更紧密相关,但HTML表格则相反.因此,我需要在后端使用更复杂的PHP来将数据转换为HTML表格,结果不会那么有意义.这里的“表格”实际上更像是一种视觉/表现效果.
>我想保持在JavaScript中操作各个列的能力(显示它们并隐藏它们以响应用户操作,具有转换效果).从我在研究它时可以看出,在标准HTML表中没有直接的方法 – 正是因为行而不是列是HTML表的基本单元.如果我错了,请给我一个反例.

简化的CSS看起来像这样：

div {
    overflow: auto;
}

div ul {
    float: left;
    list-style-type: none;
    padding: 0;
    margin: 0 0.5em;
}

当行的列数超过浏览器窗口宽度时,会出现问题.列包裹到下一行,我得到这个草率的结果：

         col A     col B     col C
row 1     foo       baz       bar

  col D     col E
   zab       oof

最终我有一个更好的解决方案,但最简单的立即修复是给行标签列足够的高度来推动这些包裹的列成行.如果我做这样的事情：

ul.row-label {
     height: [lots of ems]
}

然后我得到这个结果：

         col A     col B     col C
row 1     foo       baz       bar

         col D     col E
          zab       oof

但是因为在第一个下面可以有更多的这些模拟表,并且因为每个“表”中可以有任意数量的行,所以我不能依赖于绝对高度.

最佳答案 确保在UL内部的LI元素上设置display：block.你还应该给你的UL显示：块,溢出：隐藏和高度：100％.默认情况下,列表项是内联块,这将忽略您的高度设置.

这是一个概念证明：

<html>
<head>
<style type="text/css">
* { border: solid 1px black; }

div { overflow: auto; }

div ul 
{ 
    display: block; 
    height: 100%; 
    overflow: hidden; 
    float: left;
}
div ul li { display: block; }
</style>
</head>
<body>
<div>
    <ul class='row-label'>
        <li>&nbsp;</li>
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col A</li>
        <li>foo</li>
        <li>bar</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col B</li>
        <li>baz</li>
        <li>bat</li>
    </ul>
</div>
</body>
</html>

Rendered example http://img526.imageshack.us/img526/9444/tablewithlists.png

点赞