html - 没有滚动条的限制高度的可滚动列

Question

我尝试用一​​些类似 ListView 的图像构建侧边栏。该列具有动态高度和标题，该标题应始终可见但不固定。内容应该是可滚动的，但看不到滚动条。起初我尝试使用 padding-right 将滚动条推出容器，但后来我无法在图像上使用 100% 的宽度。所以接下来是 display:table ...我读到 overflow 只适用于 display:block，但是没有什么方法可以让表格滚动吗？

我正在使用 CONTAO 作为 CMS，所以我受模板的约束(我可以在某种程度上进行编辑)。这是结构 + CSS:https://jsfiddle.net/jf90ktb0/2/

HTML:

<aside id="left" class="column">
  <div class="inside">
    <h1 class="columnHeader">Title</h1>
    <div class="mod_article">
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
      <div class="ce_image">
        <figure class="image_container">
          <a href="#">
            <img src="http://n22.imgup.net/Image_Plac000b.png"></img>
          </a>
        </figure>
      </div>
    </div>                  
  </div>
</aside>

CSS:

* {
    margin: 0px;
    padding: 0px;
}

body {
    font: 87.5% Verdana, Arial, Helvetica, sans-serif;
}

img {
    vertical-align: bottom;
}

.column {
    display: inline-block;
    background-color: #b2b2b2;
    height: 50vh;
    margin: 0px 3% 0px 3%;
    float: left;
    overflow: hidden;
}

#left {
    width: 20%;
    margin-left: 3%;
    right: 0;
}

#left .inside {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: table;
}

#left .columnHeader {
    background-color: #333;
    color: #ffd800;
    font-size: 1.5vw;
    text-align: center;
    text-transform: uppercase;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    width: 20vw;
    display: table-caption;
}

#left .mod_article {
    width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  display: table-row;
}

#left .ce_image {
    width: 100%;
    float: left;
    display: table-cell;
}

#left .ce_image img {
    width: 100%;
}

希望有人能帮我解决这个问题。

Answer 1

这是您的解决方案: 移除 display: table-row;

并将这一行添加到您的 CSS 中:

::-webkit-scrollbar {
    width: 0px;
}