CSS 实现内容区域高度自适应，超出有滚动条

最新推荐文章于 2024-03-08 01:13:26 发布

快乐征途

最新推荐文章于 2024-03-08 01:13:26 发布

阅读量3.5k

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/hongtoushan/article/details/124960084

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      body, html {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          height: 100%;
      }

      .font-style {
          font-size: 20px;
          font-weight: bold;
      }

      .header, .footer {
          height: 50px;
          background: #2b542c;
          /*flex: none;*/
      }
      .cont {
          background: #1b6d85;
      }

      /* ----------------------------------------- */
      .vertical-scroll-layout {
          display: flex;
          flex-direction: column; /* 主轴方向设置为向下 */
          height: 100%; /* 注意这个高度100%要基于父容器的height */
          box-sizing: border-box;
      }
      .cont-scroll-wrap {
          flex: auto;
          height: 0;
          overflow-y: auto;
      }
  </style>
</head>
<body>
<!-- 要实现header和footer永远固定在上方和下方，cont占满中间区域，并且内容超出有滚动条-->
<div class="vertical-scroll-layout">
  <div class="header font-style">header</div>

  <div class="cont-scroll-wrap cont">
    <div class="font-style" style="height: 2000px;width: 400px;background: linear-gradient(blue, red)">
      cont
    </div>
  </div>

  <div class="footer font-style">footer</div>
</div>
<script>

</script>
</body>
</html>

示例

在这里插入图片描述

快乐征途

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS 实现内容区域高度自适应，超出有滚动条

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { box-sizing: border-box; margin: 0; padding: 0; height:
复制链接

扫一扫