如果 div 溢出，如何自动使用滚动条

Question

我想在图片旁边固定div的高度，但是如果文字长于div的尺寸我想开始溢出，我应该怎么做？我试过 bootstrap class 溢出，但没有任何效果。由于代码太长，不得不删除代码的照片部分。

<div class="row " >
  <div style="max-height: 20%; overflow-y: scroll;" class="col-lg-4 col-md-6 mb-4 border border-dark shadow-lg " ><br>
    <div >
    <h4>Popis:</h4><br> 
    <h5> Volkswagen Golf 2.0 TSI BMT GTI </h5><hr/>
    <p ><b>Rok výroby: </b> 10/2013</p><p></p><hr/>
    <p ><b> Najazdené km:</b> 68 546</p><p></p><hr/>
    <p ><b> Palivo:</b> benzín</p><p></p><hr/>
    <p ><b> Výkon:</b> 162kw (220PS)</p><p></p><hr/>
    <p ><b> Prevodovka:</b> 6-st. manuálna</p><p></p><hr/>
    <p ><b> Poznámka:</b> 2x kľúč,servisná kniha, aktuálne po výmene oleja filtrov, obuté úplne nové kolesa aj pneu R19” . Cena uvedená na Sk spz!. Auto bez dalších investícii, sdfjnosdjfn dksflsdkfm sdjf sdkfj msdf lkdsjfsiodfj mdskfl nmsdfioj jfsdklf lkdfj l sdflk js lkdfj s kldfj ldsfkjlskdjf lsdkfsdnf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p></p>
    </div>
  </div>

  </div>

</div>

Answer 1

您需要将 max-height 值从 20% 更改为匹配汽车轮播的 height 值。您可能还想避免对 height 使用百分比值，因为它往往会产生不良结果。

如果您还没有明确设置汽车旋转木马的高度值，则需要这样做。

例如，你应该有这样的东西：

<div class="row">
  <div style="max-height: 500px; overflow-y: scroll" class="col-lg-4 col-md-6 mb-4 border border-dark shadow-lg">
    // Text Stuff Here
  <div>
  <div style="height: 500px;" class="col-lg-8 col-md-6">
    // Carousel Stuff Here
  </div>
</div>

注意： 如果内容最终适合侧面，将 overflow-y 值从 scroll 更改为 auto 也会看起来更好不需要卷轴。

如果 div 溢出，如何自动使用滚动条

How to automatically use scrollbar if div is overflowed

html

css

styling

text-styling

bootstrap-4