Question

我有一个最小和最大高度的容器div。

里面有2个列样式div，一个宽度为80％，另一个为20％

80％的人将controller占据其容器的整个高度和宽度。

20％的人会有缩略图。我在此设置了溢出自动，以便用户可以滚动缩略图并选择一个，但溢出自动没有任何效果。我无法设置容器的精确高度，因为它必须是可变的。

如何使用缩略图在div中使用滚动条进行溢出？

请参阅此plunker：https://plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview

代码：

<img />

解决方案是在容器上有相对位置，在行为不端的div上有绝对位置。（看起来，CSS并不是精确的科学）。使用解决方案更新了Plunker，以便其他人可以找到它：https://plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview

Answer 1

编辑：这是我的一个片段。我认为这样做你想要的。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
.container{
      min-width: 420px;
    min-height: 316px;
    max-height: 337px;
    max-width: 540px;
    position: relative;
}
.gallery-main{
    width: 79%;
    display: inline-block;
    vertical-align: top;
    max-height: inherit;
    height: 100%;
    text-align: center;
}
.gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
  max-height:100%;
  position: absolute;
}

.gallery-list img {
    width: 100%;
    height: auto;
    margin: 5px 0;
    border-radius: 5px;
}
.img-container {
    height: inherit;
    width: 100%;
    height: 100%;
    display: inline-block;
}
.img-container img {
    border-radius: 5px;
    height: 100%;
    width:100%;
}
    </style>
  </head>

  <body>
    <div class="container">
    <div class="gallery-main">
      <div class="img-container">
        <img src="http://lorempixel.com/800/600" alt="">
      </div>
    </div>
    <div class="gallery-list">
        <img src="http://lorempixel.com/800/600?test=1" alt="">
        <img src="http://lorempixel.com/800/600?test=2" alt="">
        <img src="http://lorempixel.com/800/600?test=3" alt="">
        <img src="http://lorempixel.com/800/600?test=4" alt="">
        <img src="http://lorempixel.com/800/600?test=5" alt="">
        <img src="http://lorempixel.com/800/600?test=6" alt="">
        <img src="http://lorempixel.com/800/600?test=7" alt="">
        <img src="http://lorempixel.com/800/600?test=8" alt="">
        <img src="http://lorempixel.com/800/600?test=9" alt="">
        <img src="http://lorempixel.com/800/600?test=10" alt="">
        <img src="http://lorempixel.com/800/600?test=11" alt="">
    </div>
  </div>
  </body>

</html>

Answer 2

试试这个：

  .gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
    max-height:100%;
    position:fixed;
  }

在position:fixed; div上使用gallery-list。

Answer 3

请尝试此代码。

如果您使用overflow: scroll使用以下代码

.gallery-list {
    width: 20%;
    overflow: scroll;
    display: inline-block;
    vertical-align: top;
    height: 300px;
  }

或者如果您使用overflow: auto;，请使用此

 .gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
    max-height:100%;
    position:fixed;
  }

   .container{
      min-width: 420px;
    min-height: 316px;
    max-height: 337px;
    max-width: 540px;
}
.gallery-main{
  width: 79%;
    display: inline-block;
    vertical-align: top;
    max-height: inherit;
    height: 100%;
    text-align: center;
}
 .gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
    max-height:100%;
    position:fixed;
  }

.gallery-list img {
    width: 100%;
    height: auto;
    margin: 5px 0;
    border-radius: 5px;
}
.img-container {
    height: inherit;
    width: 100%;
    display: inline-block;
    max-height: inherit;
}
.img-container img {
    border-radius: 5px;
    max-height: 100%;
    max-width:100%;
}

<div class="container">
    <div class="gallery-main">
      <div class="img-container">
        <img src="http://lorempixel.com/800/600" alt="">
      </div>
    </div>
    <div class="gallery-list">
        <img src="http://lorempixel.com/800/600?test=1" alt="">
        <img src="http://lorempixel.com/800/600?test=2" alt="">
        <img src="http://lorempixel.com/800/600?test=3" alt="">
        <img src="http://lorempixel.com/800/600?test=4" alt="">
        <img src="http://lorempixel.com/800/600?test=5" alt="">
        <img src="http://lorempixel.com/800/600?test=6" alt="">
        <img src="http://lorempixel.com/800/600?test=7" alt="">
        <img src="http://lorempixel.com/800/600?test=8" alt="">
        <img src="http://lorempixel.com/800/600?test=9" alt="">
        <img src="http://lorempixel.com/800/600?test=10" alt="">
        <img src="http://lorempixel.com/800/600?test=11" alt="">
    </div>
  </div>

当容器具有最小和最大高度时，CSS溢出自动不起作用

3 个答案: