不会占用父母的100％身高

Question

我有一个<ul>与几个<li>项目在一行中。 <li>有一个嵌套的<span>和一个<img>。所有物品的<img>高度都相同。但是<span>项目包含的文本可以跨越一行或两行（取决于文本）。

我试过应用display:block，float:left，height:100%，以及我发现的其他一些建议，但较短的<li>项目将不会采取与更高的<li>项目相同的高度。所以我留下了较短的<li>项目下方的空间。有人对此有什么建议吗？

Answer 1

在这种情况下，当您设置height：100％时，它不会从其父级继承任何高度。如果你希望列表项具有div #wrapper的100％高度，那么你应该将ul的高度设置为100％并在div #wrapper上以像素或em为单位设置高度：

http://jsfiddle.net/SF9Za/1/

#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:250px;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

如果你想让它延伸到浏览器窗口的整个高度，那么你需要将你的CSS中的html，body的高度设置为100％，然后将所有元素设置为li（html，body， div＃wrapper，ul.list和li）必须有100％的高度：

http://jsfiddle.net/YdGra/

html, body{
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:100%;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

这里有一些您可能想要查看的其他链接：

• CSS 100% height layout
• Setting height: 100% on my label element doesn't work
• http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

Answer 2

一个简单的解决方法是在你的ul元素上添加display:table。高度将与内容对齐。

Answer 3

如果你更改容器ul的list-style-position，也许它会修复