html - 不会占用父级 的 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%;
}

如果你想让它拉伸(stretch)到浏览器窗口的整个高度，那么你需要将 html 的高度设置为 100%，然后将所有元素设置为 li (html , body, div#wrapper, ul.list, and 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