Search code examples
htmlcssheight

<li> will not take 100% height of the parent <ul>

I have a <ul> with several <li> items in it all in a single row. The <li> has a nested <span> and an <img>. The <img> height is all the same across all items. But the <span> items contain text which can span on a single line or two lines (depends on text).

I have tried appying display:block, float:left, height:100%, and few other suggestions I found, but the shorter <li> items will not take the same height as the taller <li> items. So I am left with a space below the shorter <li> items. Anyone has any suggestions on this?

Solution

  • In this case, when you set height:100% it isn't inheriting any height from its parent. If you want the list items to have 100% height of the div #wrapper, then you should set the ul's height to 100% and set a height on the div #wrapper in pixels or em's:

    http://jsfiddle.net/SF9Za/1/

    #wrapper {
  background: transparent;
  width: 350px;
  color: white;
  height: 250px;
}
#wrapper ul {
  list-style-type: none;
  display: block;
  float: left;
  background: green;
  height: 100%;
}

    If you'd rather have it stretch to the full height of the browser window, then you need to set the height of HTML, body in your CSS to 100%, and then all of the elements down to the li (HTML, body, div#wrapper, ul. list, and li) must have 100% height:

    http://jsfiddle.net/YdGra/

    html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  background: transparent;
  width: 350px;
  color: white;
  height:100%;
}
#wrapper ul {
  list-style-type: none;
  display: block;
  float: left;
  background: green;
  height:100%;
}

    Here are some other links that you might want to check out that talk about this: