如何创建具有固定页眉和页脚的 100% 最小高度 CSS 布局？

100% 最小高度 CSS 布局：解锁自适应内容高度

实现流畅且适应性强的布局，其中元素在不同的范围内保持最小高度浏览器上下文可能是一个挑战。本教程重点介绍一种突出的 CSS 布局技术来解决此问题，特别是在涉及固定高度页眉和页脚的场景中。

最小高度命题

的基石这种方法在于为容器元素分配 100% 的最小高度，用#container 表示。这确保了即使内容不足以填充可用空间，元素也会扩展以占据页眉和页脚之间的整个高度。

相对定位

#container 元素采用相对位置，这允许 #footer 元素保持固定在其底部，无论内容的长度如何。前面指定的 100% 最小高度可以保证正确的定位，即使内容强制 #container 垂直扩展也是如此。

Padding-bottom 调整

因为 #content 不再由于相对定位，这是正常流程的一部分，我们使用 padding-bottom 为绝对 #footer 创建空间。此填充有助于元素的滚动高度，防止页脚与其上方的内容重叠。

使用示例

以下 CSS 代码举例说明了此布局技术：

div#container {
    position: relative;
    min-height: 100%;
}

div#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

div#content {
    padding-bottom: 5em; /* Provide space for the footer */
}

响应式适应

随着浏览器窗口大小调整或文本大小变化，布局会无缝适应。容器调整其高度以容纳内容，而页脚保持固定在底部。这确保了用户获得一致且视觉上愉悦的体验。

以上是如何创建具有固定页眉和页脚的 100% 最小高度 CSS 布局？的详细内容。更多信息请关注PHP中文网其他相关文章！