上下定高 中间自适应_css布局上下高度固定中间自适应，且内容超出高度时出现滚轴...

最新推荐文章于 2023-03-12 20:33:48 发布
最新推荐文章于 2023-03-12 20:33:48 发布
阅读量334 收藏
点赞数
文章标签： 上下定高 中间自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42172204/article/details/114010746
版权

本篇文章记得一下css 布局上下固定高度  中间自适应高度   且内容 超出高度时出现滚轴

这里用的flex布局的方案实现布局

css flex 上下固定中间自适应例子

body {padding: 0;margin: 0;}

#boxs {

width: 90%;

height: 300px;

border: 1px solid #333;

display: flex;

flex-direction: column

}

.dheight {

height: 50px;

min-height: 50px;

}

.center {

flex: 1;

overflow-y: auto;

}

上边固定宽度

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

中间自适应高度超出有滚轴

下边固定宽度
杜佳加
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS之左右固定，中间自适应
wuChiSha的博客
03-28 3767
左右固定，中间自适应应该是CSS中常见的布局，或者说是CSS中经典的布局，百度查找具体的实现方式，自己敲代码时，发现了一个特别神奇的现象：右边的那个div老被挤下来，如图： 一句一句对比百度到的代码，完全一样呀，为什么会这样？一遍又一遍的查找自己代码的不同之处，奔溃蒙圈……索性把人家的代码复制粘贴，我就不信，还没效果！奇迹出现了，竟然OK了，达到预期效果了！凭什么呀！ ...
上下高度固定，中间自适应，且可以滚动
晨曦的博客
03-01 1301
html布局三部分 <div class="wrap"> <div class="header">header</div> <div class="main"> 弹性滚动区域 </div> <div class="footer">footer</div&g...
【HTML+CSS】之CSS布局
qq_37086980的博客
08-06 393
常用布局方式 table 表格布局 float 浮动 + margin inline-block 布局 flexbox布局 1.flexbox 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
css实现上下固定中间自适应
weixin_45825917的博客
03-12 734
css
CSS实现上下固定中间自适应布局
syx_12的博客
08-17 215
废话不多数哦，直接上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
css经典布局——头尾固定高度中间高度自适应布局
03-04
相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。...下面说下要求：1头部固定高度，宽度100
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
左右两列自适应中间列内容即随中间内容高度自适应的布局
09-25
两边内容可能随中间内容高度自适应，中间内容也可以随两边内容高度的增加而自适应，经过测试在主流浏览器中显示一致，下面将经验与大家分享
css布局（上下固定，中间自适应）
u011391655的博客
06-20 8662
要实现页面的上下固定，中间自适应： 1：上下固定高度 .header{ background-color: #f55d54; width: 100%; height: 50px; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; pos
html上下固定中间自适应div+css布局
09-03
html5新标签使用header、footer、nav、section布局，css设定及使用方法
横向两列布局（左列固定，右列自适应）的4种CSS实现方式
12-29
需要实现横向两列布局：左列固定，右列自适应的效果，如下图： HTML代码： XML/HTML Code复制内容到剪贴板 <DOCTYPE>   <html>   <head>   <meta charset=UTF-8>   <title>测试练习</title>   </head>   <body>   <div u00a0class=parent>         <div u00a0class=side>侧栏</div>       <div u00a0class=main>主栏</div>   </d
html高度自适应三种经典布局
08-03
html高度自适应三种经典布局
css实现上中下布局（上下固定，中间自适应）
闲云野鸟的博客
04-21 6366
先上效果图： 实现方法： 方法一： 这个最简单，利用css中vh单位和calc() 函数 使用场景： 页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
页面布局--上下固定中间自适应出现滚动条布局
qq_26702033的博客
03-07 7100
上下固定中间弹性滚动布局是H5页面最常见的布局方法；现在总结了3中布局方式。 1.position:fixed+overflow:scroll+js动态设置中间高度 html代码： //html结构 &lt;nav&gt;&lt;/nav&gt; &lt;div class="container" id="container"&gt; &lt;div class="inner"&am
css中如何实现上下自适应,css实现上下固定中间自适应布局
weixin_28844235的博客
08-04 642
html：1：使用定位实现：css：.top-center-bottom>div{position:absolute;}.top-center-bottom .top{top:0;height:100px;width:100%;background:red;}.top-center-bottom .bottom{bottom:0;height:100px;width:100%;backgro...
css 头部和底部固定，中间高度自适应，出滚动条 css代码
qinkaiyuan94的博客
10-24 3582
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 7919
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
上下固定中间自适应布局
qq_45664442的博客
05-27 281
使用flex布局 还可以使用flex布局实现这一布局，将flex-direction设置为column，定义排列方向为竖排，还需注意的是要定义页面的整体高度为100% <meta charset="UTF-8"> <title>flex布局实现</title> <style type="text/css"> html,body{ padding:0; margin:0; height:1
css高度自适应屏幕_element Table组件固定表头且高度自适应
最新发布
06-09
对于元素高度自适应屏幕的问题，可以使用CSS中的height属性设置为100vh（视口高度），如下所示： ```css .element { height: 100vh; } ``` 对于Table组件固定表头且高度自适应的问题，可以使用CSS中的position属性和overflow属性来实现。具体做法如下： 1. 首先将表格容器设置为固定高度，并设置overflow属性为auto： ```css .table-container { height: 300px; overflow: auto; } ``` 2. 然后将表格头部设置为固定位置，使用position:sticky属性： ```css thead th { position: sticky; top: 0; background-color: #fff; } ``` 这样就可以实现表格头部固定，表格内容可以自适应高度的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值