将页眉和页脚设置为内容高度，内容部分将占用所有可用空间

Question

在我的页面中，我既不知道页眉和页脚的高度。 让页眉和页脚根据内容取其高度。

从我给内容部分提供的100％中重置高度。 我正在尝试但没有得到结果。 有人帮我吗？

 html,body{ height:100%; } div.wrapp{ display:flex; height:100%; flex-flow: column wrap; border:2px solid blue; } header{ flex:1; width:100%; border:1px solid red; } section{ flex:1; height:100%; } footer{ flex:1; width:100%; } 

 <div class="wrapp"> <header>asfsdf</header> <section>sfasfsdf</section> <footer>footer</footer> </div> 

Answer 1

您可能希望该section占据其余高度 ：

 /* unnecessary is commented out */ * {box-sizing: border-box} html, body { height: 100%; /* can also use viewport units (100vh) */ margin: 0; } div.wrapp { display: flex; height: 100%; /* same here */ flex-flow: column wrap; border: 2px solid blue; } header { /*flex:1;*/ /*width:100%;*/ border: 1px solid red; } section { flex: 1; /* does the trick */ /*height:100%;*/ } footer { /*flex:1;*/ /*width:100%;*/ border: 1px solid red; } 

 <div class="wrapp"> <header>header</header> <section>section</section> <footer>footer</footer> </div>