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

已于 2023-10-13 09:14:35 修改
阅读量665 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： css3 css html vue
于 2021-01-13 11:10:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/derek_chou/article/details/112541316
博客介绍了使用CSS实现布局的方法，包括固定高度的最外层div，通过设置display、flex - direction、position和height属性；以及结合better - scroll使用的滚动容器div，利用flex - grow属性。涉及HTML标签的样式设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

<div style="display:flex;flex-direction:column;position:fixed;height:100%;">

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

     <div style="flex-grow:1">

      </div>

</div>

美团Android开发200道面试题及参考答案（上）
大模型大数据攻城狮的专栏
12-28 1341
可以借助一些已有的滑动辅助类，像 ViewPager2，它内部对于页面切换和内部子 View 的滑动有很好的协调机制，能够避免很多常见的滑动冲突情况。或者开发者根据具体需求自定义滑动逻辑，通过计算触摸点的位移、速度等参数，精确地判断滑动事件应该归属哪个 View 处理。例如在一个有多个可滑动卡片且卡片内还有列表可滑动的复杂界面中，通过自定义逻辑，分析每次触摸滑动的方向、起始点以及滑动的距离变化等，来决定是让卡片整体滑动切换还是让卡片内的列表进行滑动展示内容，以此解决滑动冲突问题。
React,Vue,Css3 ...等热门面试题
qq_70010470的博客
05-24 863
## 面试 * Fiber React Fiber是react执行渲染时的一种新的调度策略 JavaScript是单线程的 一旦组件开始更新 主线程就一直被React控制 这个时候如果再次执行交互操作 就会卡顿 页面首次渲染会创建一颗结构 一模一样的的Fiber节点树 Fiber在update的时候 会从原来的Fiber clone出一个新的Fiber 俩个Fiber diff出的变化 在更新结束后会取代之前的 Fiber节点树 渲染过程采用切片的方式
CSS3 | 实现剩余高度占用
MGsniper的博客
08-20 8421
文章目录前言案例解析 前言 在前端布局中，常有使某一部分占用容器剩余高度的布局需求。我们可以使用calc+百分比布局+border-box解决问题，但此方法不仅繁琐，且无法应对已知部分宽度不定的情况。 当仅考虑IE10以上浏览器时，我们可以选择flex布局即弹性盒子。 案例 <div class="container"> <div class="heade...
css让一个盒子的高度自适应屏幕剩余的部分
web前端开发教程htmlcssjs
11-15 1065
项目中，移动端要自适应，由于有时候数据不够，所以导致了有的区域空白 要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条 做法 1-让容器高度充满这个屏幕 在容器内容很少的情况下，要想让这个容器充满整个屏幕： `.container{ min-height:100vh; display:flex web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不...
css占剩余高度
cwb_2120的博客
08-30 621
在很多时候，我们不知道容器的高度是多少，但是我们需要随着他的高度而变化的时候，可以设置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
css 填满剩余高度
QER 的博客
11-11 5066
如图所示，这两块均是活动的，而且下面的一大块还有滚动条，上面候选区域会随着js逻辑变高，那么我怎么让这俩加起来正好是一个页面的高度呢？ 思路是，设置整个的高度为 95vh，为什么不是100？为了下面美观一点留点空间。这样外面的大框就是铺满页面的，然后上方的候选区域没法指定高度，因为是随着用户的操作变化的，只能设置下面的高度，设置一个最小高度，一个最大高度即可。 css 如下： 整体： .half { width: 50%; margin: 10px; display: flex; flex.
【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实现div填满剩余高度
热门推荐
慕子墨
01-20 5万+
需求： nav和content盒子的高度和浏览器高度相同，且不能出现纵向滚动条 绿色盒子高度固定，比如：50px 紫色盒子填充剩余的高度 BODY部分的代码： 方式一：绝对定位 方式二：box-sizing的两种方法 1. 方法一： 2. 方法二： 总结：这三种方法可以实现content盒子填充剩余部分的高度，且没有纵向滚动条，网上的flex布局还是会出现纵向滚动条，不推荐。 ...
CSS填充剩余高度
sun~的博客
10-17 461
CSS填充剩余高度
高度自适应时，css如何写可以使滚动条显示
m0_67992720的博客
06-21 450
高度自适应时，css如何写可以使滚动条显示。
css实现头部占一定高度，内容区占剩余高度可滚动
sun~的博客
12-08 765
【代码】css实现头部占一定高度，内容区占剩余高度可滚动。
CSS实现上半内容高度动态变化，下半自动填满且内部嵌套可滚动区域
西木的博客
08-31 1929
左侧栏使用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让目标盒子占满父盒子剩余的所有高度（兄弟盒子的高度是变化的）
最新发布
qq_41437448的博客
09-10 1530
日常开发中，我们会遇到一个父盒子下面有多个兄弟元素，且兄弟元素的高度可能随着业务数据的变动而发生改变，而我们需要目标子盒子的高度占据满剩余高度，这个时候没办法设置height百分百（会超出导致父盒子产生滚动条），也没办法使用calc计算（兄弟盒子的高度未知），这时候就可以使用flex布局实现。具体来说：可以将父元素设置为和，然后将 listDiv设置为，这样它就会占据剩余的所有高度。
使一个 div 填充剩余屏幕空间的高度
HuntsBot的博客
01-03 3327
我正在开发一个 Web 应用程序，我希望内容填满整个屏幕的高度。该页面有一个标题，其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。我有一个标题 div 和一个内容 div。目前我正在使用一个表格进行布局，如下所示：CSS 和 HTML#page { 高度：100%;宽度：100% } #tdcontent { 高度：100%; } #content { 溢出：自动； /* 或溢出：隐藏； */ } ... ...页面的整个高度被填满，不需要滚动。对于
css利用flex分配剩余高度出现子组件溢出问题
HDdgut的博客
08-29 3027
是一个CSS属性，用于指定弹性容器内弹性项目的伸缩能力和分配比例。情景：父组件高度一定，子组件中，其他子组件高度固定，一个子组件高度不确定（页面滚动列表）多重嵌套的时候，父组件中也有flex:1，同样需要使用overflow属性控制溢出；当子组件的内容超出了容器的高度(父组件)时候，（推荐），或是限制子组件的最大高度。1.利用flex分配剩余高度/宽度。
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`的高度会自动调整，且不会出现滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值