html - li:last-child 元素高度 100%

Question

我正在尝试将最后一个列表项的高度拉伸到 100% 以匹配 div 向右浮动的动态高度。

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

我在哪里的例子..

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

任何帮助表示赞赏

Answer 1

您所要求的可以完成，但恕我直言，当前的 CSS 中没有很好的解决方案。这是一种可行的可能性（有点）。

为了让列表知道它旁边的浮动元素的大小，两者都需要包含在同一个元素（容器）中：

<div id="container">
  <ul class="menu">
    …
    <li>…&lt;/li>
  </ul>
  <div id="floated">…&lt;/div>
</div>

为了让该容器知道其中浮动元素的大小，它也需要浮动：

#container {
  float: left;
}

因为容器元素的下一个兄弟元素会在它旁边浮动（除非它的clear属性设置为leftor both），你可能需要在它之后清除：

<div id="container">
  …
</div>
<div style="clear: both; width: 0; height: 0; line-height: 0"><!-- for MSHTML --></div>

<!-- next sibling here -->

为了让列表项元素的下边界与浮动元素的下边界对齐，它需要定位absolute——</p>

ul.menu li:last-child {
  position: absolute;
  bottom: 0;
}

– 并且容器需要定位relative，以使li元素bottom: 0与浮动元素底部的距离为零（除非它没有列表那么高）：

#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 –</p>

#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>…&lt;/li>
  </ul>
  <div id="floated">…&lt;/div>
</div>
<div style="clear: both; width: 0; height: 0; line-height: 0"><!-- for MSHTML --></div>

<!-- next sibling here -->

Chromium 22 中的 WFM。但是 AISB，它并不漂亮。您应该重新考虑为什么需要像这样拉伸最后一个列表项。也许您真正想做的是扩展列表？

Answer 2

我认为您必须将 html 和 body 高度设置为 100%

尝试使用这一行：

html, body, section {width:100%; height:100%;}