我正在尝试集中容器。这个容器有一个内部容器，内部容器又有一个标题，一个内容和一个页脚。
我想要实现的是父容器必须具有与其内容相关的高度，但是要遵守限制，设置最大高度。
我以两种不同的方式尝试了这一点，它们都没有完全发挥作用，我创建了一个fiddle来说明我的观点。
如果你逐步删除内容，你会发现尽管我只设置了最大高度，但容器并没有降低，它的行为就像设置了一个高度。
如果您将容器的类更改为＆＃34; container-2＆＃34;，您会看到尽管内容被删除后内容越来越低，但当内容大于父容器时，内部容器仍会继续拉伸，好像没有溢出：自动设置在＆＃34;内容＆＃34;框。
内容框的editablecontent属性设置为易于测试
<!DOCTYPE html>
<head>
<style>
/** just setting some colors **/
body
{
background: red;
}
.container
{
background: white;
}
section
{
background: silver;
}
header, footer
{
background: #ffff0050;
}
/** just setting some colors **/
.container
{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
width: 800px;
max-height: 80vh;
}
.container-2
{
position: absolute;
top: 50%; left: 50%;
width: 800px;
max-height: 80vh;
overflow: hidden;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
section
{
height: 100%;
}
header, footer, .content
{
padding: 20px;
}
.content
{
overflow-y: auto;
height: calc(100% - 160px);
}
header, footer
{
height: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class='container'>
<section>
<header>
header
</header>
<div class='content' contenteditable=true>
Lorem ipsum dolor sit amet, nec latine aperiam expetendis ne, eum at numquam interesset, in nec veri posidonium. Id solum aliquip ius. In vix eros debet adolescens, ea pro brute dolores. No ridens vituperata mei. Mei in duis discere ocurreret, autem evertitur signiferumque ut vim. Ne vim erant denique, posse consectetuer qui ut.
Eos labores pertinax eu, tamquam gloriatur an vim. Et lorem delenit has. Pro lorem latine cu, eu sit omnis scripserit. Mel an case prima, nec petentium adversarium et, per eirmod consequuntur ad.
At minimum propriae eum, cu assueverit necessitatibus ius. Facer omnium facilisis pri id. Has porro harum id, ne ius ferri aeterno. Zril offendit argumentum ad duo. Ei vel atqui nostro. Ei vim aeque complectitur, id per solet eligendi. Doming efficiantur et ius, usu in tempor denique, sed nisl saepe iisque in.
Id viderer sensibus corrumpit quo, mea at corpora repudiare reprimique, vix cu indoctum volutpat assueverit. Nominavi scaevola gloriatur ius no, vis ex laudem viderer. Qui utroque maluisset euripidis no. Te regione omnesque vix, debitis sententiae theophrastus vel ad, verear commune incorrupte ad cum. Ei his erant appareat, eum in omnes dolorem sapientem. Te nec doctus volumus abhorreant. Te debitis dolorem democritum mel, duo prodesset abhorreant ne, offendit gubergren eu mei.
Mel eu solum ancillae torquatos. Et vim doming animal reprimique. Ex per iusto posidonium, et per movet eleifend. Per in quas erant scribentur. Vim veritus eligendi ad, vis stet neglegentur te.
Lorem ipsum dolor sit amet, nec latine aperiam expetendis ne, eum at numquam interesset, in nec veri posidonium. Id solum aliquip ius. In vix eros debet adolescens, ea pro brute dolores. No ridens vituperata mei. Mei in duis discere ocurreret, autem evertitur signiferumque ut vim. Ne vim erant denique, posse consectetuer qui ut.
Eos labores pertinax eu, tamquam gloriatur an vim. Et lorem delenit has. Pro lorem latine cu, eu sit omnis scripserit. Mel an case prima, nec petentium adversarium et, per eirmod consequuntur ad.
At minimum propriae eum, cu assueverit necessitatibus ius. Facer omnium facilisis pri id. Has porro harum id, ne ius ferri aeterno. Zril offendit argumentum ad duo. Ei vel atqui nostro. Ei vim aeque complectitur, id per solet eligendi. Doming efficiantur et ius, usu in tempor denique, sed nisl saepe iisque in.
Id viderer sensibus corrumpit quo, mea at corpora repudiare reprimique, vix cu indoctum volutpat assueverit. Nominavi scaevola gloriatur ius no, vis ex laudem viderer. Qui utroque maluisset euripidis no. Te regione omnesque vix, debitis sententiae theophrastus vel ad, verear commune incorrupte ad cum. Ei his erant appareat, eum in omnes dolorem sapientem. Te nec doctus volumus abhorreant. Te debitis dolorem democritum mel, duo prodesset abhorreant ne, offendit gubergren eu mei.
Mel eu solum ancillae torquatos. Et vim doming animal reprimique. Ex per iusto posidonium, et per movet eleifend. Per in quas erant scribentur. Vim veritus eligendi ad, vis stet neglegentur te.
Lorem ipsum dolor sit amet, nec latine aperiam expetendis ne, eum at numquam interesset, in nec veri posidonium. Id solum aliquip ius. In vix eros debet adolescens, ea pro brute dolores. No ridens vituperata mei. Mei in duis discere ocurreret, autem evertitur signiferumque ut vim. Ne vim erant denique, posse consectetuer qui ut.
Eos labores pertinax eu, tamquam gloriatur an vim. Et lorem delenit has. Pro lorem latine cu, eu sit omnis scripserit. Mel an case prima, nec petentium adversarium et, per eirmod consequuntur ad.
At minimum propriae eum, cu assueverit necessitatibus ius. Facer omnium facilisis pri id. Has porro harum id, ne ius ferri aeterno. Zril offendit argumentum ad duo. Ei vel atqui nostro. Ei vim aeque complectitur, id per solet eligendi. Doming efficiantur et ius, usu in tempor denique, sed nisl saepe iisque in.
</div>
<footer>
footer
</footer>
</section>
</div>
</body>
你知道如何让这两件事一起工作吗？
答案 0 :(得分：0)
使用.container-2然后需要替换它 -
.content {
overflow-y: auto;
height: calc(100% - 160px);
}
用这个
.content {
overflow-y: auto;
max-height: calc(80vh - 160px);
}