title: Setting width/height as percentage minus pixels
body: <p>I'm trying to create some re-usable CSS classes for more consistency and less clutter on my site, and I'm stuck on trying to standardize one thing I use frequently.</p>
  
  <p>I have a container <code>&lt;div&gt;</code> that I don't want to set the height for (because it will vary depending on where on the site it is), and inside it is a header <code>&lt;div&gt;</code>, and then an <strong>unordered list</strong> of items, all with CSS applied to them.</p>
  
  <p>It looks a lot like this:</p>
  
  <p><img src="https://i.stack.imgur.com/emytO.jpg" alt="Widget"></p>
  
  <p>I want the <strong>unordered list</strong> to take up the remaining room in the container <code>&lt;div&gt;</code>, knowing that the header <code>&lt;div&gt;</code> is <code>18px</code> tall. I just don't know how to specify the list's height as "the result of <code>100%</code> minus <code>18px</code>".</p>
  
  <p>I've seen this question asked in a couple other contexts on SO, but I thought it would be worth asking again for my particular case. Does anyone have any advice in this situation?</p>