<li>不会占用父<ul>的100%高度

Question

我在一行中<ul>有几个<li>项目.在<li>具有嵌套<span>和<img>.<img>所有项目的高度都相同.但是这些<span>项目包含的文本可以跨越一行或两行(取决于文本).

我曾尝试appying 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%高度布局
• 在我的标签元素上设置高度:100%不起作用
• http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm