div داخلي قابل للتمرير مع أقصى ارتفاع

1

لدي الترميز التالي:

أريد أن يكون div الداخلي قابلاً للتمرير وبأقصى ارتفاع ، ولكن لا أريد توسيع ارتفاع div أكثر من ارتفاع المحتوى ، إذا كان ارتفاع المحتوى أصغر. تحقق من الكمان وقم بتغيير حجم الارتفاع لرؤية التأثير.

https://jsfiddle.net/dapv7bor/1/

.umg-info {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  height: 100%;
  max-height: 80%;
  background: #1a1a1b;
  z-index: 50;
}

.umg-info-data {
  overflow: auto;
  height: 90%;
  margin: 20px 20px 20px 20px;
}

.umg-player-title {
  color: #fff;
  margin-bottom: 10px;
  padding: 0;
}

.umg-player-desc {
  color: #bbb;
  margin: 0;
  padding: 0;
}
<div class="umg-info">

  <div class="umg-info-data">
    <div class="umg-player-title">Lorem ipsum dolor sit amet</div>
    <div class="umg-player-desc">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies
      sollicitudin, nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est.
      Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum
      tellus tortor ut mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
      </div>
  </div>
</div>

3 الاجابة

1
افضل جواب

يمكنك أيضا التتابع على flex التخطيط والاستخدام max-height / width لتشغيل شريط التمرير.

مثال:

body {
  margin: 0;
}

.umg-info {
  /* because you used it, can be avoided if not for a modal */
  position: absolute;
  /* make a flex box with window's size where content is centered */
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.umg-info-data {
  /* single flex child centered, set max-size and overflow */
  max-width: 80vw;
  max-height: 80vh;
  overflow: auto;
  /* makup */
  background: #1a1a1b;
  color: #fff;
  padding: 20px;
  border: 20px solid #1a1a1b;
  box-sizing: border-box;
}

.umg-player-title {}

.umg-player-desc {}
<div class="umg-info">
  <div class="umg-info-data">
  <!-- maybe hx and p tags for text is to be used ? -->
    <h2 class="umg-player-title">Click also 'FULL PAGE'</h2>
    <p class="umg-player-desc">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies
      sollicitudin, nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est.
      Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum
      tellus tortor ut mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
  </div>
</div>

أقوم بتحويل بعض divs إلى علامات hx / p وأضبط الألوان البيضاء حيث يتم تعيين الخلفية الداكنة للتأكد من عدم نسيان الأطفال الذين يحملون نصًا. ؛)

ترميز للعب مع

:مؤلف
0

تم تعديله لجعل العمل كمثل مع مثاله وتوضيح أكثر ما يجب القيام به

أعتقد أن كل ما عليك القيام به هو تعيين .umg-info-desc {max-height: 90%; overflow: auto;} (وإزالة القواعد من قاعدة ata الخاصة بك). يمكنك مشاهدة مثال على ذلك يعمل في هذا الكمان: https://jsfiddle.net/dapv7bor/14/

:مؤلف
0

استخدم التمرير على .umg-info وإزالة الارتفاع من .umg-info-data

:مؤلف
فوق
قائمة طعام