html - 李 :last-child element height 100%

Question

我试图将最后一个列表项的高度拉伸(stretch)到 100%，以匹配向右浮动的 div 的动态高度。

ul.menu li:last-child {height:100%}

我得到的地方的例子..

http://jsfiddle.net/kvtV8/1/

感谢任何帮助

Answer 1

您所要求的可以完成，但恕我直言，当前 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)最后一个列表项。也许您真正想做的是扩展列表？