如何使用 HTML 和 CSS 创建具有可滚动内容的固定页眉和页脚？

Linda Hamilton

发布： 2024-12-02 12:16:11

原创

932 人浏览过

How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?

具有可滚动内容的固定页眉和页脚

使用以下最少的 HTML 和 CSS 可以实现具有可滚动内容的固定页眉和页脚代码。

<html>
  <body>

登录后复制

body {
  height: 100%;
  width: 100%;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 200px;
  right: 0px;
  overflow: hidden;
}

#content {
  position: absolute;
  top: 200px;
  bottom: 200px;
  left: 0px;
  right: 0px;
  overflow: auto;
}

#footer {
  position: absolute;
  bottom: 0px;
  height: 200px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}

登录后复制

此 HTML 和 CSS 代码创建固定的页眉和页脚，中间有可滚动的内容区域。页眉和页脚具有固定高度，而内容区域可以垂直滚动。

以上是如何使用 HTML 和 CSS 创建具有可滚动内容的固定页眉和页脚？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：如何隐藏两行后的文本并显示溢出指示器，例如“...123 T.”？下一篇：jQuery 如何根据特定 CSS 属性选择元素？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章