我试图将最后一个列表项的高度拉伸(stretch)到 100%,以匹配向右浮动的 div 的动态高度。
ul.menu li:last-child {height:100%}
我得到的地方的例子..
感谢任何帮助
最佳答案
您所要求的可以完成,但恕我直言,当前 CSS 中没有漂亮的解决方案。这是一种可行的可能性(某种程度上)。
为了让列表知道旁边 float 元素的大小,两者都需要包含在同一个元素(容器)中:
<div id="container">
<ul class="menu">
…
<li>…</li>
</ul>
<div id="floated">…</div>
</div>
为了让容器知道其中 float 元素的大小,它也需要 float :
#container {
float: left;
}
因为容器元素的下一个兄弟元素随后会 float 在它旁边(除非它的 clear
属性设置为 left
或 both
),您可能需要在它之后清除:
<div id="container">
…
</div>
<div style="clear: both; width: 0; height: 0; line-height: 0"><!-- for MSHTML --></div>
<!-- next sibling here -->
为了使列表项元素的下边界与 float 元素的下边界对齐,需要将其定位为absolute
–
ul.menu li:last-child {
position: absolute;
bottom: 0;
}
——并且容器需要定位relative
,这样li
元素的bottom: 0
表示离 float 底部的距离为零元素(除非它没有列表那么高):
#container {
position: relative;
float: left;
}
但是,如果您这样定位最后一个列表项,您将丢失其左边界和上边界的动态计算坐标。
如果您知道最后一个列表项上方的列表项占用多少空间,我只能看到一种解决最后一个问题的方法和可能性。这将更难维护,但如果你想坚持下去,就在这里:
ul.menu li:last {
position: absolute;
/* in your case */
left: 0;
/*
* Assumption: 3 items above, each has a computed height of 1em, no margins
* in-between. (Obviously, until CSS3 Computed Values becomes widely adopted,
* you would need to use the same unit of length here as you use for the
* heights of the list items above and possible margins between them.)
*/
top: 3em;
bottom: 0;
}
显然,ul
元素一定不能然后定位,否则您的li
坐标将会关闭。
总而言之,CSS –
#container {
position: relative;
float: left;
}
/* AIUI from your original code */
#container #floated {
float: right;
}
#container ul.menu li:last-child {
position: absolute;
/* see above */
left: 0;
top: 3em;
bottom: 0;
}
– 和标记:
<div id="container">
<ul class="menu">
…
<li>…</li>
</ul>
<div id="floated">…</div>
</div>
<div style="clear: both; width: 0; height: 0; line-height: 0"><!-- for MSHTML --></div>
<!-- next sibling here -->
Chromium 22 中的 WFM。但是 AISB 并不漂亮。您应该重新考虑为什么需要像这样拉伸(stretch)最后一个列表项。也许您真正想做的是扩展列表?
关于html - 李 :last-child element height 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13421806/