动态限制滚动高度 [英] limit the height from scroll dynamically

问题描述

我不知道如何在不固定最大高度的情况下限制滚动 div 的高度.

情况如下:

<div class="img-item"><img></div><div class="scroll-item"></div>

我想将我的滚动项 div 限制为我的 img-item 的高度.

display: flex 不起作用，因为它给出了最高 div(即滚动项)的高度height:100% 和 auto 都不起作用.

所以我不知道如何在不固定高度(例如:200px)的情况下做到这一点.

参见示例 fiddle.

你有什么想法吗?

解决方案

嗯，我想这就是你要找的东西——将滚动项的内容包装到一个 absolutely 定位的盒子中，以便滚动项无法确定高度.

示例:

*{box-sizing: 边框框；}.包装{显示:弹性；宽度:250px；}.wrapper >* {边框:1px纯红色；}.scroll-item{位置:相对；溢出-y:自动；弹性:1；}图片{最大宽度:100%；垂直对齐:顶部；}.内{位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}

<div class="img-item"><img src="http://placehold.it/100x100">
<div class="scroll-item"><div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Quae Molestiae、liberoinventre nobis et veritatis、laborum vitae、vel eaque omnis ad adipisci quia velit blanditiis qui.Cum voluptas quisquam itaque possimus accusamus repellendus quia iure过时.Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.

看看这个，让我知道你对此的反馈.谢谢！

I don't know how to limit the height from scroll div without fixing the max-height.

Here is the situation:

<div>
  <div class="img-item"><img></div>
  <div class="scroll-item"></div>
</div>

I want to limit my scroll-item div to the height of my img-item.

display: flex doesn't work because it gives the height of the heighest div (which is the scroll item) height:100% and auto don't work neither.

So i have no idea how to do that without fixing the height (ex: 200px).

See example fiddle.

Do you have an idea?

解决方案

Well I guess this is what you are looking for- wrap the contents of the scroll item into an absolutely positioned box so that the scroll item does not get to determine the height.

Example:

*{
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  width: 250px;
}
.wrapper > * {
  border: 1px solid red;  
}
.scroll-item{
  position: relative;
  overflow-y: auto;
  flex: 1;
}
img{
  max-width: 100%;
  vertical-align: top;
}
.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  

<div class="wrapper">
  <div class="img-item">
    <img src="http://placehold.it/100x100">
  </div>
  <div class="scroll-item">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
    </div>
  </div>
</div>

Check this out and let me know your feedback on this. Thanks!

这篇关于动态限制滚动高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！