代码之家 › 专栏 › 技术社区 › Toniq

内部分区可滚动,最大高度

responsive css html

1

Toniq · 技术社区 · 7 年前

我有以下标记:

我希望内部的DIV可以滚动并且具有最大高度,但是如果内容的高度较小,我不希望DIV高度扩展超过内容的高度。检查小提琴并调整高度以查看效果。

.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 回复 | 直到 7 年前

1

G-Cyrillus 7 年前

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>

codepen to play with

2

0

Manish 7 年前

3

0

Joe Lissner 7 年前

.umg-info-desc {max-height: 90%; overflow: auto;} https://jsfiddle.net/dapv7bor/14/