flex布局之固定的底栏

最新推荐文章于 2024-02-26 17:29:47 发布

1条粉肠

最新推荐文章于 2024-02-26 17:29:47 发布

阅读量1.7k

点赞数 2

分类专栏： CSS样式实例文章标签： css css3

原文链接：https://blog.csdn.net/u013818205/article/details/87929119

版权

CSS样式实例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。这里有个“视口高度”的单位vh。“视口”是什么，其实也很好理解，在PC端，视口是指浏览器的可视区域，那视口高度的单位vh是怎么回事呢？其实也难理解。只要记住1vh=视口高度的1%。更简单的描述是，假如你的浏览器可视高度为1000px，那么1vh = 1000px / 100 = 10px，由此可见100vh就是你浏览器可视区域的最小高度啦。这里好有个细节，flex容器主轴的方向必须为垂直方向 flex-direction：column；，main元素自动占据视口高度剩余的空间，flex：1；。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>固定的底栏</title>
  <style>
    header{
      width: 100%;
      height: 50px;
      background-color: honeydew;
    }
    #flex-container{
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    #flex-container .site-content{
      flex: 1;
    }
    footer{
      width: 100%;
      height: 100px;
      background-color: black;
      color: #fff;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div id="flex-container">
    <header>I am header</header>
    <main class="site-content">
      <h1>hello,I am main</h1>
    </main>
    <footer>粤ICP备案：238499</footer>
  </div>
</body>
</html>

1条粉肠

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
flex布局之固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。这里有个“视口高度”的单位vh。“视口”是什么，其实也很好理解，在PC端，视口是指浏览器的可视区域，那视口高度的单位vh是怎么回事呢？其实也难理解。只要记住1vh=视口高度的1%。更简单的描述是，假如你的浏览器可视高度为1000px，那么1vh = 1000px / 100 =...
复制链接

扫一扫