html - li：最後の子要素の高さ100％

Question

最後のリストアイテムの高さを100％に伸ばして、右に浮いたdivの動的な高さに一致させようとしています。

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

私が持っている場所の例..

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

助けていただければ幸いです

Answer 1

あなたが求めていることは実行できますが、私見では現在のCSSにはかなりの解決策がありません。これが機能する可能性の1つです（ある種）。

リストがその隣の浮動要素のサイズを認識するためには、両方が同じ要素（コンテナ）に含まれている必要があります。

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

そのコンテナがその中のfloated要素のサイズを認識するためには、それもfloatする必要があります。

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

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

–コンテナはrelative、li要素のbottom: 0平均がフロートされた要素の下部からゼロ距離になるように配置する必要があります（リストほど高くない場合を除く）。

#container {
  position: relative;
  float: left;
}

ただし、最後のリストアイテムをそのように配置すると、動的に計算された左側と上部の境界の座標が失われます。

最後のリストアイテムより上のリストアイテムがどれだけのスペースを占めるかを知っている場合、私は1つの方法しか見ることができず、その最終的な問題を修正する可能性しかありません。それを維持するのは難しいでしょうが、あなたがそれをやりたいのなら、ここにあなたがいます：

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と身長を100％にする必要があると思います

この行を使用してみてください：

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