Question

我有绝对定位的块，如果内容增长但不会超出屏幕（在内部内容块上创建滚动条），它应该减少。怎么做？

UPD：header块也可以具有可变高度，因此我无法使用其固定高度。但我不希望它滚动。

（请更新问题的标题，我不确定）

＆＃13;

.wrapper {
  width: 200px;
  border: 4px solid #000;
  position: absolute;
  top: 10px;
  left: 10px;
}

.header {
  height: 100px;
  margin-bottom: 10px;
  background-color: pink;
}

.article {
  background-color: silver;
  overflow: auto;
  position: relative;
  width: 100%;
}

＆＃13;

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>

<div class="wrapper">
  <div class="header">footer</div>
  <div class="article">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus minus iure amet, voluptatum neque laborum est ducimus eius illo eligendi veritatis voluptas!</div>
    <div>Fugiat dolores blanditiis illo, odio eligendi quam dolor odit asperiores dignissimos reiciendis cupiditate. Maiores, soluta. Possimus error nam ipsum eaque dolor voluptatibus autem, animi quas, sed, eveniet vitae repellat unde!</div>
    <div>Officia nemo quas at facere eum esse cum aliquid quibusdam, magni quasi. Voluptas, ad odit possimus accusantium dolorem fuga voluptatum vero consequuntur ullam itaque laborum aut reprehenderit, facilis, commodi unde.</div>
    <div>Iusto saepe quaerat corporis. Exercitationem ipsum aliquam nisi nemo dolor libero at quam dolorum rerum, praesentium, sequi fugit, eius mollitia provident inventore recusandae. Atque nesciunt suscipit rem tempora harum quos.</div>
  </div>
</div>

<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>

＆＃13;

Answer 1

我认为flex-box可以帮到你：

＆＃13;

.wrapper {
  width: 200px;
  border: 4px solid #000;
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 20px); /* screen height - 10px margin top and bottom */
}

.header {
  background-color: pink;
  flex-grow: 1; 
}

.article {
  background-color: silver;
  overflow: auto;
  width: 100%;
  flex-grow: 1; /* allow to grow as needed */
}

＆＃13;

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>

<div class="wrapper">
  <div class="header">footer</div>
  <div class="article">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus minus iure amet, voluptatum neque laborum est ducimus eius illo eligendi veritatis voluptas!</div>
    <div>Fugiat dolores blanditiis illo, odio eligendi quam dolor odit asperiores dignissimos reiciendis cupiditate. Maiores, soluta. Possimus error nam ipsum eaque dolor voluptatibus autem, animi quas, sed, eveniet vitae repellat unde!</div>
    <div>Officia nemo quas at facere eum esse cum aliquid quibusdam, magni quasi. Voluptas, ad odit possimus accusantium dolorem fuga voluptatum vero consequuntur ullam itaque laborum aut reprehenderit, facilis, commodi unde.</div>
    <div>Iusto saepe quaerat corporis. Exercitationem ipsum aliquam nisi nemo dolor libero at quam dolorum rerum, praesentium, sequi fugit, eius mollitia provident inventore recusandae. Atque nesciunt suscipit rem tempora harum quos.</div>
  </div>
</div>

<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>

＆＃13;

这是一个文本较少的版本，以显示它的行为方式：

＆＃13;

.wrapper {
  width: 200px;
  border: 4px solid #000;
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 20px);
}

.header {
  background-color: pink;
  flex-grow: 0;
}

.article {
  background-color: silver;
  overflow: auto;
  width: 100%;
  flex-grow: 1;
}

＆＃13;

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>

<div class="wrapper">
  <div class="header">footer</div>
  <div class="article">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus </div>
  </div>
</div>

<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>

＆＃13;

如何不允许绝对定位块在屏幕外生长

1 个答案: