li：最后一个子元素高度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>…</li>
  </ul>
  <div id="floated">…</div>
</div>

要让容器知道浮动元素的大小，它也需要浮动：

#container {
  float: left;
}

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

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

<!-- next sibling here -->

对于列表项元素，其下边界与浮动元素的下边界对齐，需要将其定位absolute -

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 -

#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，它并不漂亮。您应该重新考虑为什么需要像这样拉伸最后一个列表项。也许你 想要做的就是拉伸列表？

Answer 2

我认为你必须把html和身高调到100％

尝试使用此行：

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