我有一个具有最小和最大高度的容器 div。
里面有 2 个列样式的 div，一个宽度为 80%，另一个宽度为 20%
80% 的人将有一个 <img />占据其容器的全高和宽度。
20% 的将有缩略图。我在此设置了自动溢出，以便用户可以滚动浏览缩略图并选择一个，但自动溢出没有任何效果。我无法设置容器的确切高度，因为它必须是可变的。
如何在带有缩略图的 div 中使用滚动条来实现溢出？
请引用这个插件:https://plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview
代码:
<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="">
</div>
</div>
<style>
.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%;
}
.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%;
}
</style>
解决方案是在容器上设置相对位置，在行为不当的 div 上设置绝对位置。 (看来，CSS 并不是精确的科学)。使用解决方案更新了 Plunker，以便其他人可以找到它:https://plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview
最佳答案
编辑:这是我的一个片段。我认为这可以满足您的需求。
<!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>关于html - 当容器具有最小和最大高度时，CSS overflow auto 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43277799/