首页写出一个页面，分成三个部分，分别是上边框，主要内容，下边框，其中上下边框的位置是固定的不能滚动的，主要内容部分则可以滚动展示

写出一个页面，分成三个部分，分别是上边框，主要内容，下边框，其中上下边框的位置是固定的不能滚动的，主要内容部分则可以滚动展示

时间: 2024-10-02 17:01:19 浏览: 24

为了创建这样一个页面布局，你可以使用HTML、CSS来构建基本结构，然后使用CSS来设置固定的上边框和下边框以及可滚动的内容区域。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { margin: 0; padding: 0; display: flex; min-height: 100vh; /* 设置最小高度为视窗高度 */ } .header { width: 100%; height: 50px; /* 固定上边框高度 */ background-color: #e9ecef; /* 上边框颜色 */ position: sticky; /* 顶部固定 */ top: 0; z-index: 1; /* 确保边框在内容之上 */ } .main-content { flex-grow: 1; /* 主要内容占剩余空间 */ overflow-y: auto; /* 开启垂直滚动 */ padding: 40px; /* 内容区内部填充 */ } .footer { width: 100%; height: 60px; /* 固定下边框高度 */ background-color: #f5f5f5; /* 下边框颜色 */ position: sticky; /* 底部固定 */ bottom: 0; } </style> </head> <body> <div class="header">固定上边框</div> <div class="main-content">  <p>这是主要内容部分，可以添加很多文本或其它元素，内容会自动滚动显示。</p>  </div> <div class="footer">固定下边框</div> </body> </html> ``` 在这个例子中，`.header` 和 `.footer` 分别设置了固定的宽度和高度，并通过 `position: sticky` 实现了顶部和底部的固定效果。`.main-content` 则设置了 `overflow-y: auto` 来启用垂直滚动条。

阅读全文