title: CSS: Anchor In List Item Doesn't Stay 100% Height
body: <p>So, here's the skinny...</p>
  
  <p>I have <a href="http://www.flcbranson.org/estherssistershusband.php" rel="nofollow noreferrer">a page that has a list as <code>display:table-cell</code></a>.  As the width of the browser resizes, the contents (anchors) of the lists may wrap to 2 lines.  The problem is the anchors that don't wrap to 2 lines aren't staying 100% height.</p>
  
  <p>CSS...</p>
  
  <pre><code>.home .pushes ul {display:table;}
  .home .pushes ul li {display:table-cell; vertical-align:middle; width:25%; background-color:#e5a015; color:#ffffff;}
  .home .pushes ul li a {display:block; padding:4em 0; padding:4rem 0;}
  </code></pre>
  
  <p>So, the height of <code>&lt;li&gt;</code> should be determined by the height and padding of <code>&lt;a&gt;</code>.  But, since it's <code>&lt;display:table-cell&gt;</code>, the height is determined by the tallest <code>&lt;a&gt;</code>.</p>
  
  <p>Ok, so just set <code>a {height:100%;}</code>.  But, then, the anchor doesn't keep the padding.  So, just set <code>li {height:160px;}</code> or something.  But, then the anchor isn't vertically-centered.  So, just set <code>li {line-height:160px;}</code>.  But, then the anchor is huge when it wraps to 2 lines.</p>
  
  <p>So, what is a guy to do?</p>
  
  <p>I could do <code>li {display:inline-block;}</code>.  But I want all the boxes to be the same height.</p>
  
  <p>JJ</p>
  
  <p>Edit...</p>
  
  <p>HTML included for posterity...</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;bleh&lt;/li&gt;
      &lt;li&gt;bleh&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JJ</p>
  
  <p>Edit 2...</p>
  
  <p>The anchor background color is what isn't growing the full height of its parent.</p>
  
  <p><img src="https://i.stack.imgur.com/ID35Q.jpg" alt="Note the bottom 4 boxes"></p>
  
  <p>I didn't realize that I could upload an image.  Thanks for the tip.</p>
  
  <p>JJ</p>