Html 从流体柔性容器底部移除间隙

我有一个3列

flex

ul

列表，其中包含流体宽度/高度容器

当我将

height

设置为

60%

时，它会在底部产生一个间隙。

页脚文本

应紧靠容器。我需要使用

%

而不是

px

，这样它就可以随着浏览器的大小进行缩放

在任何元件上设置

max height

，似乎都无法消除间隙

---

HTML

<ul class="category">
  <li>
    <a href="#">
      <div class="photo-container">
        <img src="https://i.imgur.com/By5S6Rd.jpg">
      </div>
      <div class="title">Example</div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="photo-container">
        <img src="https://i.imgur.com/da2NTpb.jpg">
      </div>
      <div class="title">Example</div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="photo-container">
        <img src="https://i.imgur.com/RGVB4jY.jpg">
      </div>
      <div class="title">Example</div>
    </a>
  </li>
</ul>

<hr /> 
Footer

最新答复： 我花了很多时间试图弄明白这一点，但最后……）

---

这是一个错误，我只是把300px在那里，例如，以表明它没有影响它，并删除了他们在更新的链接。我必须使用

%

而不是

px

。看，当你缩放JSFIDLE时，标题会从照片中分离出来。@MattMcManis我刚刚用你想要的结果更新了我的答案，让我知道你的想法。它更近了，尽管现在缩放时会拉伸图像。它最初保留了这个方面，并使用

overflow:hidden对其进行了裁剪。目前，我不得不使用几个媒体查询来针对每个页面大小进行调整，因为我还没有弄清楚。如果应用%的高度，图像将会拉伸，这是意料之中的。如果您不想这样做，可以始终在px中应用固定高度。这有什么问题？
ul.category {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-height: 300px;
}

ul.category li {
  max-width: 32%;
  text-align: center;
  max-height: 300px;
}

.photo-container {
  height: 60%;
  max-height: 300px;
  overflow: hidden;
}

.photo-container img {
  width: 100%;
}

.title {
  margin-bottom: 0.5em;
  padding: 0.4em;
  color: #fff;
  font-weight: 700;
  background: #000;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.category {
    height: 60%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: pink;
}

.category a {
    height: 100%;
    width: 32%;
}

.photo-container {
    height: 100%;
}

.photo-container img {
    display: block;
    height: 90%;
    width: 100%;
}

.title {
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    background: #000;
}