3行动态div高度基于内容和容器在CSS/超文本标记语言[重复]

Question

我试图创建一个窗口，其中有一个头，内容和脚部分，所有3个部分的内容可以变化，我试图实现的是，头和脚的高度扩展，以适应他们的内容（可以是0px到300px的任何内容）和'内容'部分展开以填充容器中的剩余空间。如果'内容'框的内容太大，它应该显示滚动条。

这是我到目前为止所拥有的：

<style>
#container{
    position: absolute;
    display: table;
    width: 500px;
    height: calc(100vh - 80px);
    top: 80px;
    right: 0;
    border-spacing: 10px;
    background-color: lightgrey;
}

#container > .header{
    position: absolute;
    display: table-row;
    background-color: blue;
    width: calc(100% - 20px);
}

#container > .content{
    position: relative;
    display: table-row;
    background-color: green;
}

#container > .footer{
    position: absolute;
    display: table-row;
    background-color: red;
    width: calc(100% - 20px);
    bottom: 10px;
}


</style>
<div id="container">
    <div class="header">&nbsp;</div>
    <div class="content">&nbsp;</div>
    <div class="footer">&nbsp;</div>
</div>

最后，我想让内容滚动到页眉和页脚后面，但这需要在顶部和底部的内容框中添加边距/填充，但页眉和页脚高度未知。

如果我必须求助于java-cript来实现这一点（获取页眉和页脚的高度，然后设置内容高度），我会，但更喜欢使用CSS。

Answer 1

由于您正在寻找“灵活”的布局，我建议您在content div上使用flexbox和overflow-y:auto。在下面的示例中，容器是body元素：

* {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

body {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  width:          100vw;
  height:         100vh;
}

header, footer, .content {
  width: 100%;
}

header {
  background: rgba(150,0,0,0.5);
}

footer {
  background: rgba(0,150,0,0.5);
}

.content {
  flex-grow:  1;
  overflow-y: auto;
}

<header>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus aliquam eleifend mi in. Purus sit amet volutpat consequat mauris. Tincidunt arcu non sodales neque sodales ut. Amet est placerat in egestas erat imperdiet sed euismod. Sit amet mauris commodo quis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Metus vulputate eu scelerisque felis. Facilisi etiam dignissim diam quis. Purus faucibus ornare suspendisse sed. Nunc non blandit massa enim nec. At auctor urna nunc id cursus metus aliquam eleifend mi. Varius sit amet mattis vulputate enim nulla aliquet. Purus viverra accumsan in nisl nisi scelerisque. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
</header>
<div class="content">Your content goes here</div>
<footer>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus aliquam eleifend mi in. Purus sit amet volutpat consequat mauris. Tincidunt arcu non sodales neque sodales ut. Amet est placerat in egestas erat imperdiet sed euismod. Sit amet mauris commodo quis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Metus vulputate eu scelerisque felis. Facilisi etiam dignissim diam quis. Purus faucibus ornare suspendisse sed. Nunc non blandit massa enim nec. At auctor urna nunc id cursus metus aliquam eleifend mi. Varius sit amet mattis vulputate enim nulla aliquet. Purus viverra accumsan in nisl nisi scelerisque. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
</footer>

Answer 2

您可以使用flex-box与flex-方向：列来实现这种布局，不需要分配边距或paddings：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

header, footer {
  background-color: salmon;
  padding: 10px;
}

main {
  flex: 1;
  overflow-y: auto;
  background-color: steelblue;
  padding: 10px;
}

<div class="container">
  <header>Header</header>
  <main>
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p>
  </main>
  <footer>Footer</footer>
</div>