你可以使用CSS中的position属性和overflow属性来实现内容滑动而不遮盖标题的效果。

首先,将标题的position属性设置为fixed,这将使标题固定在页面上而不会随着内容滚动。然后,将内容的overflow属性设置为scroll,这将在内容溢出时显示滚动条。

下面是一个示例代码:

<!DOCTYPE html>
<html>
<head>
<style>
  .title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #f1f1f1;
    text-align: center;
    line-height: 50px;
  }
  
  .content {
    margin-top: 50px;
    height: 300px;
    overflow: scroll;
  }
</style>
</head>
<body>
  <div class="title">固定标题</div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ante eget nisl convallis tempus. Phasellus ante lectus, tincidunt tincidunt dui a, rhoncus interdum est. Sed molestie quis augue ac pulvinar. Pellentesque egoists</p>
    <!-- 内容超出高度,将显示滚动条 -->
  </div>
</body>
</html>

在这个示例中,标题具有固定的位置,并且内容具有可滚动的overflow属性。这样,即使内容超出高度,也可以通过滚动条来查看其余的内容,而不会遮盖标题

标题固定内容增加overflow内容滑动不遮盖标题css

原文地址: http://www.cveoy.top/t/topic/iG1J 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录