CODEWITHSUNDEEP
htmlcss
Cam
Cam

Reputation: 970

li:last-child element height 100%

I'm trying to stretch the height of the last list item to 100% to match the dynamic height of the div floated right.

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

example of where i've got..

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

enter image description here

any help appreciated

Upvotes: 2

Views: 992

Answers (2)

Jai
Jai

Reputation: 74738

I think you have to put html and body height to 100%

Try using this line:

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

Upvotes: 0

PointedEars
PointedEars

Reputation: 14970

What you are asking for can be done but IMHO there is no pretty solution in current CSS. Here is one possibility that works (sort of).

For the list to be aware of the size of the floated element next to it, both need to be contained in the same element (container):

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

For that container to be aware of the size of the floated element in it, it needs to float as well:

#container {
  float: left;
}

Because the next sibling of the container element would then float next to it (unless it had its clear property set to left or both), you might need to clear after it:

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

<!-- next sibling here -->

And for the list item element to have its lower boundary aligned with the lower boundary of the floated element, it needs to be positioned absolute –

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

– and the container needs to be positioned relative so that the li element's bottom: 0 means zero distance from the bottom of the floated element (unless it is not as high as the list):

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

However, if you position the last list item like that, you are losing the dynamically computed coordinates for its left and upper boundary.

I can see only one way and only a possibility to fix that final problem if you know how much space the list items above the last one take. That will be harder to maintain, but if you want to go for it, here you are:

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;
}

Obviously, the ul element must not be positioned then, or your li coordinates will be off.

In summary, the 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;
}

– and the markup:

<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 -->

WFM in Chromium 22. But AISB, it is not pretty. You should reconsider why you need the last list item to be stretched like this. Maybe what you really want to do is to stretch the list?

Upvotes: 1

Related Questions