css样式设置高度自适应容器剩余空间并支持滚动（类似于android中match）

原创已于 2023-10-13 09:14:35 修改 · 689 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html #vue

于 2021-01-13 11:10:13 首次发布

web前端专栏收录该内容

4 篇文章

订阅专栏

博客介绍了使用CSS实现布局的方法，包括固定高度的最外层div，通过设置display、flex - direction、position和height属性；以及结合better - scroll使用的滚动容器div，利用flex - grow属性。涉及HTML标签的样式设置。

最外层div(核心是固定其高度):

滚动容器div（结合better-scroll使用）：

</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

韶华轻负

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

美团Android开发200道面试题及参考答案（上）

大模型大数据攻城狮的专栏

12-28

1521

可以借助一些已有的滑动辅助类，像 ViewPager2，它内部对于页面切换和内部子 View 的滑动有很好的协调机制，能够避免很多常见的滑动冲突情况。或者开发者根据具体需求自定义滑动逻辑，通过计算触摸点的位移、速度等参数，精确地判断滑动事件应该归属哪个 View 处理。例如在一个有多个可滑动卡片且卡片内还有列表可滑动的复杂界面中，通过自定义逻辑，分析每次触摸滑动的方向、起始点以及滑动的距离变化等，来决定是让卡片整体滑动切换还是让卡片内的列表进行滑动展示内容，以此解决滑动冲突问题。

React,Vue,Css3 ...等热门面试题

最新发布

qq_70010470的博客

05-24

997

## 面试 * Fiber React Fiber是react执行渲染时的一种新的调度策略 JavaScript是单线程的一旦组件开始更新主线程就一直被React控制这个时候如果再次执行交互操作就会卡顿页面首次渲染会创建一颗结构一模一样的的Fiber节点树 Fiber在update的时候会从原来的Fiber clone出一个新的Fiber 俩个Fiber diff出的变化在更新结束后会取代之前的 Fiber节点树渲染过程采用切片的方式

参与评论您还未登录，请先登录后发表或查看评论

css自适应高度或宽度,超出内容显示滚动条

weixin_72589507的博客

11-22

8317

css自适应高度或宽度,超出内容显示滚动条：有时候项目中使用了flex布局，高度或是宽度是自动填满剩余空间，不是具体的数值的时候，想要设置区域滚动条

css让一个盒子的高度自适应屏幕剩余的部分

web前端开发教程htmlcssjs

11-15

1090

项目中，移动端要自适应，由于有时候数据不够，所以导致了有的区域空白要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条做法 1-让容器高度充满这个屏幕在容器内容很少的情况下，要想让这个容器充满整个屏幕： `.container{ min-height:100vh; display:flex web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不...

flex布局实现内容区域高度自适应

09-13

4502

在实现自适应高度时，需要将容器的 display 属性设置为 flex 和 flex-direction 属性设置为 column，就可以轻松地解决传统布局中内容自适应高度的问题。当我们将容器的 display 属性设置为 flex 时，容器中的所有子元素都会成为 Flexbox 容器的项目。在 Flexbox 布局中，我们可以通过设置容器的 display 属性为 flex 实现自适应高度。

CSS：宽高自适应详解

ZJH_are的博客

07-17

1万+

2.选择器before{content''}表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容。1.选择器after{content''}表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容。-【重要】当块级元素脱离文档流的时候,宽度由内容决定=>设置浮动和定位的盒子一定记得要加宽高大小！-浏览器的高度默认是0,html,body{height100%}-HTML,BODY表示浏览器,默认是块级元素,宽度是100%...

css占剩余高度

cwb_2120的博客

08-30

692

在很多时候，我们不知道容器的高度是多少，但是我们需要随着他的高度而变化的时候，可以设置display：flex；我这里的需求是右侧的文字是后端返回的，不知道他的具体高度，所以左侧的线要随着右侧的文字的高度变化而变化。我得布局大致是这样的一个大容器里包含，左右两个盒子，左侧是线，右侧是文字。align-items: stretch 和 flex-grow: 1。我们这里借助display: flex中的。

【css】css 实现填充剩余高度

落叶无声的专栏

10-11

2万+

自动填充高度.html <div class="box"> <div class="header">头部</div> <div class="auto-fill">自动填充</div> </div> 使用 flex（推荐）兼容性好；只需关注自动填充的 div，无需考虑其他 div 的高度 .box { display: flex; flex-flow: column; height: 100%; } .h

【Android布局专家】：Textview与图片同行显示，避免文字溢出的高级技巧

[Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)](https://sebhastian.com/android-textview-multiline/android-textview-breaking-space.png) # 摘要本文深入探讨了Textview与图片同行显示...

【Android Studio多屏幕适配指南】：响应式设计的必修课

本文首先概述了Android Studio多屏幕适配的必要性，并深入探讨了屏幕适配的基础理论，包括屏幕尺寸和分辨率的分类、响应式布局的重要性以及dp与px单位的使用。实践技巧章节提供了使用不同布局资源和高级布局适配技术...

【Android布局新视角】：Textview与图片同行显示的全攻略

!... # 摘要本文系统地介绍了Android布局基础，特别关注TextView与ImageView的使用，探讨了在不同布局文件中实现文本与图片同列显示的...深入解析了线性布局、框架布局和网格布局中控件放置与配置的方法，并在高级应用章

css 填满剩余高度

QER 的博客

11-11

5127

如图所示，这两块均是活动的，而且下面的一大块还有滚动条，上面候选区域会随着js逻辑变高，那么我怎么让这俩加起来正好是一个页面的高度呢？思路是，设置整个的高度为 95vh，为什么不是100？为了下面美观一点留点空间。这样外面的大框就是铺满页面的，然后上方的候选区域没法指定高度，因为是随着用户的操作变化的，只能设置下面的高度，设置一个最小高度，一个最大高度即可。 css 如下：整体： .half { width: 50%; margin: 10px; display: flex; flex.

CSS实现div填满剩余高度

热门推荐

慕子墨

01-20

5万+

需求： nav和content盒子的高度和浏览器高度相同，且不能出现纵向滚动条绿色盒子高度固定，比如：50px 紫色盒子填充剩余的高度 BODY部分的代码：方式一：绝对定位方式二：box-sizing的两种方法 1. 方法一： 2. 方法二：总结：这三种方法可以实现content盒子填充剩余部分的高度，且没有纵向滚动条，网上的flex布局还是会出现纵向滚动条，不推荐。 ...

CSS填充剩余高度

sun~的博客

10-17

478

CSS填充剩余高度

高度自适应时，css如何写可以使滚动条显示

m0_67992720的博客

06-21

472

高度自适应时，css如何写可以使滚动条显示。

css div填满剩余高度

朝阳39的博客

09-01

2622

<div class="father"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> 核心要点子绝父相同时设置top和bottom来填充剩余垂直空间 .father { /* 父元素必须设置为相对定位，否则子元素会相...

css实现头部占一定高度，内容区占剩余高度可滚动

sun~的博客

12-08

798

【代码】css实现头部占一定高度，内容区占剩余高度可滚动。

CSS实现上半内容高度动态变化，下半自动填满且内部嵌套可滚动区域

西木的博客

08-31

1982

左侧栏使用flex布局，query区域不做任何限制，高度可以变化。下半部分query-data部分使用flex-grow: 1使其可以填满左侧栏剩余部分空间。query-data的header为固定高度，所以可滚动区域需使用绝对定位相对query-data容器进行定位（query-data容器需position: relative），top设为header的高度。......

CSS让子元素div的高度填满父容器的剩余空间的方法

11-06

1万+

原帖：https://pythonjishu.com/unbayyjtzdjeewe/以下是详细讲解 CSS 让子元素 div 的高度填满父容器的剩余空间的方法的完整攻略。

css设置textarea高度自适应不出现滚动条

06-09

要让`textarea`的高度自适应，且不出现滚动条，可以使用`max-height`属性和`box-sizing`属性。以下是一个使用`max-height`属性和`box-sizing`属性实现`textarea`高度自适应的示例代码： ```html <textarea id="myTextarea"></textarea> ``` ```css #myTextarea { height: auto; /* 设置高度为自适应 */ max-height: 200px; /* 限制最大高度为200px */ padding: 10px; /* 设置内边距 */ box-sizing: border-box; /* 计算元素高度时包括内边距和边框 */ overflow-y: hidden; /* 隐藏垂直滚动条 */ } ``` 在上面的示例中，我们将`textarea`的高度设置为自适应，且最大高度为200px，使用`padding`属性设置内边距，使用`box-sizing`属性将内边距和边框计算在元素的高度中，使用`overflow-y`属性隐藏垂直滚动条。这样，在输入内容时，`textarea`的高度会自动调整，且不会出现滚动条。