基于 CSS/HTML 中的内容和容器的 3 行动态 div 高度 [重复]

Question

我正在尝试创建一个“窗口”，其中有一个“头”、“内容”和“脚”部分，所有 3 个部分中的内容可能会有所不同，我想要实现的是“头” ' 和 'foot' 扩展高度以适应它们的内容（可以是从 0px 到 300px 的任何值），并且 'content' 部分扩展以填充容器中的剩余空间。如果“内容”框的内容太大，它应该显示一个滚动条。

这是我目前所拥有的：

<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 脚本来实现这一点（获取页眉和页脚的高度，然后设置内容高度），我会但更愿意使用 CSS。

Answer 1

您可以使用带有flex-direction: column 的flex-box 来实现这种布局，无需分配边距或填充：

* {
  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>

Answer 2

由于您正在寻找“灵活”的布局，我建议您在内容 div 上使用带有 overflow-y: auto 的 flexbox。在下面的示例中，容器是 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>