将 div 内的元素设置为 100% 高度

Question

我希望在一个div中有一个元素，高度设置为100％。该元素（一个ul元素）必须相对定位。列表项的绝对位置是相对于父元素而言的。

请参考以下示例：http://jsfiddle.net/mbecker/ee78G/2/ 如何将绿色的ul元素设置为100%高度？

提前感谢您的帮助！

- mbecker

---

我认为你不能给ul设置高度，因为它不是块级元素。你想让ul的高度为100%吗？还是里面的li元素？ - Jesse Webb

@JesseWebb ul是一个块级元素，如我所记得的。 - canon

@antisanity - 我认为只有 li 元素是块级元素。我试图确定一下，但 W3C 网站（http://www.w3schools.com/tags/tag_ul.asp）没有明确说明。你怎么能确定呢？ - Jesse Webb

@JesseWebb http://www.w3.org/TR/html-markup/ul.html#ul-display - canon

如果一个元素不是块级元素，你可以始终使用 display: block 来将其设置为块级元素。 - Shawn Steward

Answer 1

我在#main上删除了height: auto !important。然后，我可以将height: 100%设置为#list。

但我不确定是否需要height: auto。

http://jsfiddle.net/KBHcs/

为了更好地解释，height: auto !important 使内容定义元素的高度，而 !important 覆盖了 height: 100%。在这种情况下，“sd”是

中唯一的内容，因为
• 是绝对定位的，因此不属于文档流。

- Paul Sham

---

啊！有了你的解释，你应该得到一个加一的赞！;) 永远记住未来的访问者会看到你的回答！ - Zuul

Answer 2

你可以将 #list 元素设置为使用绝对定位，然后设置顶部和底部坐标。这是您修改后的 jsfiddle 的示例： http://jsfiddle.net/ee78G/11/

- Shawn Steward

---

+1 - 我不知道这是可能的，这在任何浏览器中都可以工作吗？ - Cyclonecode

是的，它可以在任何现代浏览器中运行。我相信包括IE8+、Firefox、Chrome和Safari。 - Shawn Steward