Question

我尝试使用一些类似listview的图片构建侧边栏。该列具有动态高度和标题，该标题应始终可见但不固定。内容应该是可滚动的，但没有看到滚动条。起初我试图将滚动条从容器中向后推出填充 - 但是然后我将无法在图像上使用100％宽度。接下来就是display：table ...我读过溢出只能在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;
}

具有约束高度的可滚动列，无滚动条

1 个答案: