Html 引导程序4-如何保持边栏与响应方块的高度相同？

我有以下设置： 我有一个图像框，作为一个响应的正方形，使用伪元素：after和padding-bottom:100%

问题是： 我想在我的盒子旁边有一个侧边栏，它可以包含任意数量的小缩略图。但是，在默认引导行为中，较小的框会被调整为较大的框。相反，我试图使侧边栏始终与主图像保持相同的高度。如果更大，内容应该垂直滚动

我已经尝试在侧边栏周围使用包装器来实现这一点，但是盒子仍然会变大

我的问题: 如何确保侧边栏仅获得其旁边方形框的最大高度

.行{ 边缘顶部：20px； } .行>分区{ 边框：实心1px 6c757d； 填充：10px； } img{ 显示：块； 边框：1px纯红； } .sidebar>div:not:last child img{ 边缘底部：10px； } .主img{ 宽度：100%； 身高：100%； 对象匹配：覆盖； } .main.wrapper{ 边框：1px纯绿色； 位置：相对位置； } .main.wrapper:之后{ 内容：\00a0； 显示：块； 垫底：100%； 线高：0； } .主支架{ 位置：绝对位置； 左：0； 排名：0； 身高：100%； 宽度：100%； } .侧边栏包装器.侧边栏{ 身高：100%； 溢出y：滚动； }

---

这是绝对可能的，只有纯CSS。好的，前提很简单。您希望您的行始终采用响应图像的高度，而不是您提到的长长的缩略图列表

我们需要告诉浏览器只查看图像的高度而忽略缩略图列表，为此，我们使用绝对位置从文档流中删除缩略图列表

我复制了您的引导布局，尽管更简单，并实现了我刚才提到的内容。我将边栏定位设置为相对垂直溢出以滚动。我用固定的flex宽度设计了它，没有增长或收缩，然后放置了另一个绝对定位的容器div来放置缩略图

然后，我在主图像所在的位置添加了第二列。剩下的就是添加了img流体引导风格，使图像响应迅速，瞧

在这里演奏小提琴：

这是代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
  .container-overrides {
    background: #ccc;
    margin: 20px auto;
    max-width: 500px !important;
  }

  .sidebar {
    position: relative;
    overflow-y: scroll;
    flex: 0 0 50px;
  }

  .sidebar .image-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 10px;
  }

  .sidebar img {
    display: block;
    margin: 0 auto 10px;
  }

  .sidebar img:last-of-type {
    margin: 0 auto;
  }
  .main{
    background:#ccc;
  }
  .main img {
    height: auto;
    border: 1px solid red;
  }

</style>

<div class="container p-0 container-overrides">
  <div class="row no-gutters">
    <!-- Responsive Sidebar -->
    <div class="sidebar bg-dark p-2">
      <div class="image-container">
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
      </div>
    </div>
    <!-- Main Image Container -->
    <div class="col p-2 main">
      <img src="https://ih1.redbubble.net/image.393347411.1344/flat,800x800,070,f.jpg" class="img-fluid" />
    </div>
  </div>
</div>

---

这在纯CSS中是不可能的，您必须使用一点javascript来实现结果良好的解决方案，我真的很喜欢它！