CODEWITHSUNDEEP
htmlcss
user934902
user934902

Reputation: 1204

Height not stretching to 100%

My span height (class="figure") is not stretching to 100% height of the list item

HTML

<div class="container">
    <ul>
       <li>
           <span class="stepLabel">Step</span>
           <span class="figure"></span>
           <img src="indent.png" alt="ghost" class="ghost">
       </li>
       <li>
           <span class="stepLabel">Step</span>
           <span class="figure"></span>
           <img src="indent.png" alt="ghost" class="ghost">
       </li>
    </ul>
 </div>

CSS

.container { width: 90%; margin: 10px auto; border: 1px solid #d8d8d8; }
ul { list-style: none; margin: 0; padding: 0; overflow: hidden; }
ul li { display: block; width: 12.1%; height: auto; float: left; margin-left: -1%; }
ul li .stepLabel { display: block; position: absolute; z-index: 999; }
ul li img.ghost { width: 100%; height: auto; position: relative; z-index: 1; opacity: 0.1; }

.figure { display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); }

http://jsfiddle.net/6YsT3/

Upvotes: 0

Views: 125

Answers (2)

user2895892
user2895892

Reputation:

width/heigh 100%? You can use position: absolute and left/right/top/bottom 0-s

http://jsfiddle.net/6YsT3/5/

Don't forget parent's position: relative (for li);

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240878

Set the height of the parent li.

ul li {
    height: 72px;
}

The initial height of an element is auto, therefore that isn't even doing anything. The span element will collapse upon itself, as 100% of auto is actually just 0.

Updated jsFiddle example

Upvotes: 2

Related Questions