html - 容器 100% 并正在扩展

Question

我有一个类似这样的页面结构:
CSS:

html,body{
    height: 100%;
    border: 1px solid;
    box-sizing: border-box; 
}
#pagina{
    height: 100%;
}
#list{
    height: 100%;
}
.persona{
    border: 1px solid;
    height: 40%;
}

HTML:

<div id=pagina>
<div id=list>
    <div class="persona">Prova</div>
    <div class="persona">Prova</div>
    <div class="persona">Prova</div>
</div>

我希望该页面的高度为 100%，并且它正在适应其内容。
你能帮帮我吗？

Answer 1

让你的容器 div height:auto 和 min-height:100%。这将使你的内容区域填充标准 css 浏览器视口(viewport)的 100%