CSS：最大高度：剩余空间

Question

下图描述了该问题：

编辑：
第一个包括div应始终可见。当main div完全填满时，第二个隐藏其剩余内容。

<div style="height:100%">
    <div>Dynamic ajax content</div>
    <div style="max-height:[remaining space]">Dynamic ajax content</div>
</div>

这里是一个小提琴什么，我有这么远。

Answer 1

2019 年，我们可以利用 Flexbox 来实现这一目标。在弹性内容可以扩展的情况下，使用position: absolute固定内部内容的高度和宽度，使其能够支持溢出。

超文本标记语言

<div class="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="flexi-content-wrapper">
        <div class="flexi-content">
            <!-- some long contents here -->
        </div>
    </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh;
  padding: 15px;
}

.header {
  font-size: 1.5em;
  font-weight: 700;
  margin: 10px 0;

}

.content {
 margin-bottom: 10px;
}

.flexi-content-wrapper {
  margin-top: 10px;
  flex: 1;
  position: relative;
}

.flexi-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgb(253, 140, 140);
  overflow: auto;
}

这是完整的示例。如果您更喜欢 stackblitz：https://stackblitz.com/edit/angular-chvhsk

或者，您可以使用代码片段运行以下代码：

.wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh;
  padding: 15px;
}

.header {
  font-size: 1.5em;
  font-weight: 700;
  margin: 10px 0;

}

.content {
 margin-bottom: 10px;
}

.flexi-content-wrapper {
  margin-top: 10px;
  flex: 1;
  position: relative;
}

.flexi-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgb(253, 140, 140);
  overflow: auto;
}

.paragraph {
  padding: 20px 15px;
}

<div class="wrapper">
    <div class="header">Lorem Ipsum</div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
        electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
        Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
        PageMaker including versions of Lorem Ipsum.</div>
    <div class="flexi-content-wrapper">
        <div class="flexi-content">
            <div class="paragraph">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lectus eget metus faucibus luctus
                vitae et felis. Curabitur a vestibulum ex. Morbi ut tincidunt risus. Morbi luctus commodo gravida.
                Curabitur vitae rutrum nulla. Cras metus lacus, feugiat nec fermentum vel, suscipit et mauris. Ut
                consequat gravida dolor ut varius. Mauris vestibulum lorem vel egestas laoreet. Aliquam laoreet lacus
                ante, vel porttitor magna luctus quis. Nullam diam est, sodales in risus quis, fringilla venenatis nunc.
                Suspendisse eu vehicula risus, eu tempus risus. Morbi id urna consequat, malesuada ligula vitae,
                dignissim enim. Donec eros diam, feugiat et posuere a, rhoncus a eros. Aenean quis gravida purus, non
                elementum diam.
            </div>
            <div class="paragraph">
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris
                orci felis, dignissim vitae ullamcorper ac, interdum vel mauris. Suspendisse semper elit ipsum, id
                pretium mi viverra ut. Morbi fermentum eleifend metus ac dictum. Curabitur lectus quam, varius id dui
                at, imperdiet fermentum ipsum. Phasellus id eleifend felis. Etiam scelerisque porta auctor.
            </div>
            <div class="paragraph">
                Maecenas maximus purus a urna volutpat, quis congue nulla blandit. Donec ac ex massa. Vivamus euismod
                quam sit amet maximus commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan,
                enim in consequat vehicula, nunc justo finibus nibh, quis tincidunt massa eros eu risus. Nulla
                scelerisque rutrum rutrum. Suspendisse venenatis, dolor eu finibus maximus, arcu massa varius velit,
                eget maximus lacus ex ut tellus. Cras a tortor iaculis, volutpat risus quis, congue lectus. Curabitur id
                mi in massa rutrum luctus. Donec ornare dolor ut massa congue, ac pretium lacus viverra. Morbi vulputate
                sapien et nibh pharetra cursus. Phasellus ac lobortis orci, eu laoreet tortor. Cras ac purus ligula. Sed
                in cursus ipsum. Etiam interdum neque vitae euismod facilisis.
            </div>
            <div class="paragraph">
                Integer placerat feugiat metus, a egestas mi porta lacinia. Nam interdum pretium ligula feugiat
                elementum. Phasellus quis urna tincidunt, rhoncus ligula et, commodo tortor. Pellentesque tristique
                ipsum eu odio sodales finibus. Vestibulum ut enim malesuada, ullamcorper est pretium, pulvinar elit. Ut
                gravida luctus elit. Ut vehicula sodales convallis. Mauris at velit eget nisi tincidunt tempus. Aenean
                non est scelerisque nunc porta volutpat. Nam urna justo, fermentum vitae neque et, tristique porttitor
                ipsum. Praesent orci quam, fermentum id ultricies id, varius et lorem. Vivamus quis viverra eros, vitae
                rutrum sapien.
            </div>
            <div class="paragraph">
                Sed odio leo, imperdiet vitae feugiat et, volutpat id massa. Proin gravida feugiat vehicula. Nulla
                lobortis risus nec cursus congue. Praesent euismod fringilla ante, aliquam semper arcu malesuada sed.
                Nulla ac nisl velit. Aliquam porta dui sit amet arcu tempor vehicula. Integer tincidunt nisl vitae diam
                venenatis dictum. Integer ut placerat leo. Ut eu ultrices magna. Nam eget leo gravida, semper urna
                mollis, bibendum ante. Proin accumsan massa nec hendrerit gravida. Suspendisse interdum ipsum in justo
                ullamcorper, eu hendrerit turpis iaculis. Nunc id rhoncus urna. Integer elementum nibh ut turpis gravida
                accumsan. Quisque vulputate imperdiet ligula sed imperdiet. Nullam auctor ante nunc, vel pretium tortor
                tempor quis.
            </div>
            <div class="paragraph">
                Morbi id tellus vehicula, dapibus ante eget, malesuada arcu. Vivamus aliquam vitae sem eu tincidunt.
                Nullam laoreet consequat congue. Pellentesque id vestibulum metus. Nullam elementum tincidunt dignissim.
                Mauris et erat id ipsum elementum ullamcorper eget non metus. Phasellus elementum lorem non lacinia
                pretium. Fusce vel placerat sapien. Sed condimentum bibendum lectus at rhoncus. Phasellus eu auctor
                velit.
            </div>
        </div>
    </div>
</div>

Answer 2

我不太清楚你的意思，但你可以使用百分比... height:70%; 此处解释更多：http://www.w3schools.com/cssref/pr_dim_height.asp 百分比金额将根据用户屏幕高度而变化。我想这可能就是你所需要的。