在网页布局中，经常会遇到需要中间区域自适应填充剩余视口空间的需求，例如聊天窗口、内容展示区域等。同时，页面通常包含固定高度的页眉和页脚，因此需要精确计算中间区域的高度，以避免内容溢出或留白。以下是一种常用的解决方案，它利用CSS变量、calc()函数和min-height属性来实现这一目标。
核心思路
- 定义CSS变量： 使用CSS变量存储页眉和页脚的高度，方便统一管理和修改。
- 计算剩余高度： 使用calc()函数计算剩余高度，即视口高度减去页眉和页脚的高度。
- 设置最小高度： 使用min-height属性将中间区域的最小高度设置为计算出的剩余高度。
示例代码
以下是一个示例代码，展示了如何使用这种方法实现中间区域自适应高度填充剩余视口空间：
立即学习“前端免费学习笔记（深入）”；
HTML:
<div class="navbar">
navbar
</div>
<section>
<header>header</header>
<div class="chat">
This will fill up the entire remaining space even if there is not enough content
to fill up vertical space, so the footer will always stick to the bottom of the screen
</div>
<footer>footer</footer>
</section>CSS:
:root {
--header-height: 2rem;
--footer-height: 4rem;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 1px solid gray;
}
.navbar {
height: 2rem;
}
section {
height: calc(100vh - 2rem); /* Section height is viewport height minus navbar height */
}
header {
background-color: magenta;
height: var(--header-height);
}
.chat {
background-color: aqua;
min-height: calc(100vh - var(--header-height) - var(--footer-height));
}
footer {
background-color: green;
height: var(--footer-height);
}代码解释
- :root选择器用于定义全局CSS变量。 --header-height和--footer-height分别存储页眉和页脚的高度。
- .chat类的min-height属性使用calc()函数计算剩余高度。100vh表示视口高度，然后减去页眉和页脚的高度。
- 使用min-height而不是height，可以确保当中间区域的内容超过计算出的剩余高度时，内容不会溢出。
注意事项
- 确保正确设置box-sizing: border-box;，以便在计算高度时包含边框和内边距。
- 可以使用不同的单位（例如px、em、rem、vh）来定义页眉和页脚的高度，calc()函数会自动进行单位转换。
- 如果页眉或页脚的高度是动态变化的，可以使用JavaScript来更新CSS变量的值。
总结
使用CSS变量、calc()函数和min-height属性是一种灵活且易于维护的方法，可以实现中间区域自适应高度填充剩余视口空间。这种方法能够适应不同的屏幕尺寸和内容长度，并确保页面布局的正确性和美观性。通过合理地运用这些CSS特性，可以轻松地创建出响应式且用户友好的网页。
