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

问题描述

我不知道如何限制滚动div的高度，而不固定最大高度。

这里是情况：

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

我想限制我的scroll-item div到我的img-item的高度。

显示：flex 不起作用，因为它给出了最高div（这是滚动项）的高度
height ：100％和 auto 都不起作用。

所以我不知道怎么做，不固定高度（例如200px）。
$ b $ p

a>。

你有什么想法？

解决方案

我想这就是你要找的东西 - 将滚动条的内容包装到一个绝对定位的框中，这样滚动条就不能确定高度。 / p>



示例：
$ b

  * {box-sizing：border-box;}。wrapper {display：flex; width：250px;}。wrapper> * {border：1px纯红色; } .scroll-item {position：relative;溢出-y：auto; flex：1;} img {max-width：100％; vertical-align：top;}。inner {position：absolute;顶部：0;左：0;宽度：100％; }  < div class =包装> < 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。你们不要这样说，我们要饶恕你们，因为我们要饶恕那些人。 < / DIV> < / div>< / div>  

并让我知道你对此的反馈。谢谢！

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!

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