CSS中滚动容器与固定Tabbar自适应的几种方法实现介绍_F11

分享到

CSS中滚动容器与固定Tabbar自适应的几种方法实现介绍

css 来源：互联网作者：佚名发布时间：2023-09-11 23:14:12 人浏览

摘要

问题容器高度使用 px 定高时，随着页面高度发生变化，组件展示的数量不能最大化的铺满，导致出现底部留白。容器高度使用 vw 定高时，随着页面宽度发生变化，组件展示的数量不能

问题

容器高度使用 px 定高时，随着页面高度发生变化，组件展示的数量不能最大化的铺满，导致出现底部留白。
容器高度使用 vw 定高时，随着页面宽度发生变化，组件展示的数量不能最大化的铺满，导致出现底部留白。

很明显这两种方案都是采用错误的像素单位而导致的，下面我将会介绍如何使用其它方案来解决。

方式1：采用 padding

给最外层的容器定好 padding，子容器后续以 padding 为基准，案例代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body {

margin: 0; padding: 0;

}

* {

box-sizing: border-box;

}

.main {

padding-top: 100px;

padding-bottom: 100px;

}

.container .component {

width: 200px;

height: 200px;

margin-bottom: 10px;

background: orange;

}

header, footer {

position: fixed;

height: 100px;

background: red;

left: 0; right: 0;

}

header {

top: 0;

}

footer {

bottom: 0;

}

</style>

</head>

<body>

Header Tabbar

</header>

</div>

Footer Tabbar

</footer>

</div>

</body>

</html>

效果：

即保留了原生滚动（不用设置 overflow），也实现了自适应，解决了底部留白的问题。

在 header 不固定但 footer 固定的情况下，可将容器的 padding-top 去掉只保留 padding-bottom 即可。

方式2：采用 vh

其实，header 不用 fixied 也能达到吸顶效果，其原理是，给容器定高 + overflow 实现自己的滚动容器，但如果使用了错误的单位，比如本文一开始说的 vw，就会导致留白情况：

我们可以采用 vh 单位来解决，案例代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body {

margin: 0; padding: 0;

}

* {

box-sizing: border-box;

}

.container {

height: 65vh;

overflow: auto;

}

.container .component{

width: 200px;

height: 200px;

margin-bottom: 10px;

background: orange;

}

header {

height: 100px;

background: pink;

}

footer {

position: fixed;

height: 100px;

background: red;

left: 0; right: 0;

bottom: 0;

}

</style>

</head>

<body>

Header Tabbar

</header>

</div>

Footer Tabbar

</footer>

</div>

</body>

</html>

高度未发生变化前：

高度发生变化后：

方式3：采用 JS getBoundingClientRect 动态计算

像 vh、vw 这类动态计算 px 的单位在 IE9 前是不支持的，这里可以考虑借助 JS 提供的 getBoundingClientRect 函数来实现。
它会返回当前元素的宽高、top/left 偏离值，我们可以根据两个元素之间的 top 值相减来获取对应的定高，实现组件最大化铺满，代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body {

margin: 0; padding: 0;

}

* {

box-sizing: border-box;

}

.container {

overflow: auto;

}

.container .component{

width: 10vw;

height: 10vw;

margin-bottom: 10px;

background: orange;

}

header {

height: 100px;

background: pink;

}

footer {

position: fixed;

height: 100px;

background: red;

left: 0; right: 0;

bottom: 0;

}

</style>

</head>

<body>

Header Tabbar

</header>

</div>

Footer Tabbar

</footer>

</div>

addEventListener("DOMContentLoaded", (event) => {

const footerDom = document.getElementById('footer')

const containerDom = document.getElementById('container')

const { top: footerOffsetTop } = footerDom.getBoundingClientRect();

const { top: containerOffsetTop } = containerDom.getBoundingClientRect();

const scrollHeight = footerOffsetTop - containerOffsetTop;

containerDom.style.height = scrollHeight + 'px'

});

</script>

</body>

</html>

页面高度未发生变化前：

页面高度发生变化后：

您可能感兴趣的文章 :

原文链接 :

Tag : css(249)容器(14)

CSS实现背景图片透明文字不透明效果的两种方法

网页设计中经常要在背景图上放一些文字介绍，这就需要背景图片能有透明效果以便突出显示文字信息，经多方查阅，终于找到了2种有趣的
CSS中滚动容器与固定Tabbar自适应的几种方法实现

问题容器高度使用 px 定高时，随着页面高度发生变化，组件展示的数量不能最大化的铺满，导致出现底部留白。容器高度使用 vw 定高时，
组件el-scrollbar的使用实例介绍

对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，
CSS实现元素水平垂直居中的几种方法解释

1. 使用Flexbox布局 Flexbox是CSS的强大布局模型，它为我们提供了简单而灵活的方法来实现元素的水平和垂直居中。 1 2 3 4 5 6 html复制代码 div
使用CSS实现锯齿形边框的代码

不知道大伙有没有见过下面这种效果。没错，这回给大伙带来的是一个锯齿形边框，类似于传统邮票的边框，有一圈锯齿形状，具体效果可
css中div盒子height:100%高度无效解决办法介绍

一、flex布局情况下 1、在父元素设置一个固定px高度例如height: 500px 2、在子元素设置height: auto 那么为什么height: 100%不生效呢？原因是flex布局
Grid中的repeat函数使用示例介绍

在本文中，我们将探索 CSS Grid repeat() 函数的所有可能性，它允许我们高效地创建 Grid 列和行的模式，甚至无需媒体查询就可以创建响应式布
Anchor Positioning锚点定位功能抢先体验

本文，将向大家介绍 CSS 规范中，最新的 Anchor Positioning，翻译为锚点定位。 Anchor Position 的出现，极大的丰富了 CSS 的能力，虽然语法稍显复
CSS3实现双圆角Tab菜单的详细介绍

效果图分析一个带圆角的矩形 + 左右对称的不规则图形（一个小矩形分别去掉一个圆角），利用伪元素::before::after和box-shadow阴影实现。代
CSS设置背景颜色透明的两种方法介绍

1，通过background和opacity设置背景颜色透明 background属性中属性值比较简单，所以我们简单看看opacity属性 opacity属性参数的不透明度是以数字表