首页写出一个页面，分成三个部分，分别是上边框，主要内容，下边框，其中上下边框的位置是固定的不能滚动的，主要内容部分则可以通过在电脑上滚动鼠标或在手机上触屏控制滚动上下

写出一个页面，分成三个部分，分别是上边框，主要内容，下边框，其中上下边框的位置是固定的不能滚动的，主要内容部分则可以通过在电脑上滚动鼠标或在手机上触屏控制滚动上下

时间: 2024-10-03 20:00:36 浏览: 22

创建这样一个页面，可以使用HTML、CSS来设计布局，下面是一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } .container { display: flex; height: 100vh; /* 全屏幕高度 */ overflow-y: auto; /* 开启垂直滚动 */ } .header { width: 100%; background-color: #f0f0f0; /* 上边框颜色，你可以自定 */ position: sticky; /* 固定顶部 */ top: 0; padding: 20px; /* 边框内填充 */ } .content { flex-grow: 1; /* 主要内容区域，自动填充剩余空间 */ padding: 20px; } .footer { width: 100%; background-color: #f0f0f0; /* 下边框颜色，你可以自定 */ position: sticky; /* 固定底部 */ bottom: 0; padding: 20px; } </style> </head> <body> <div class="container"> <div class="header">上边框</div> <div class="content">主要内容区，您可以在这里添加动态内容...</div> <div class="footer">下边框</div> </div> </body> </html> ``` 在这个例子中，`.header` 和 `.footer` 部分通过 `position: sticky` 实现了固定位置，而`.content` 使用 `overflow-y: auto` 使得内容可滚动。只需将实际的内容替换到`.content` 中即可。

阅读全文