不会采用父级

的 100% 高度

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

我尝试过申请display:block, float:left, height:100%，以及我发现的其他一些建议，但更短<li>物品的高度不会与较高的物品相同<li>项目。所以我在较短的下面留了一个空间<li>项目。 有人对此有什么建议吗？

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

http://jsfiddle.net/SF9Za/1/ 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/ 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% 高度布局 https://stackoverflow.com/questions/6158975/css-100-height-layout
• 在我的标签元素上设置 height: 100% 不起作用 https://stackoverflow.com/questions/4789835/css-100-height-doesnt-work
• http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm