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

最新推荐文章于 2023-03-12 20:33:48 发布
最新推荐文章于 2023-03-12 20:33:48 发布
阅读量366 收藏
点赞数
文章标签： 上下定高 中间自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42172204/article/details/114010746
版权
该篇博客详细介绍了如何利用CSS Flex布局来创建一个页面布局，其中上、下部分有固定高度，中间区域则根据内容自适应高度，并在内容超出时自动显示垂直滚动条。示例代码展示了具体的实现方式，适用于前端开发者进行网页布局设计。
摘要由CSDN通过智能技术生成

本篇文章记得一下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;

}

上边固定宽度

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下边固定宽度
杜佳加
关注
CSS之左右固定，中间自适应
wuChiSha的博客
03-28 3799
左右固定，中间自适应应该是CSS中常见的布局，或者说是CSS中经典的布局，百度查找具体的实现方式，自己敲代码时，发现了一个特别神奇的现象：右边的那个div老被挤下来，如图： 一句一句对比百度到的代码，完全一样呀，为什么会这样？一遍又一遍的查找自己代码的不同之处，奔溃蒙圈……索性把人家的代码复制粘贴，我就不信，还没效果！奇迹出现了，竟然OK了，达到预期效果了！凭什么呀！ ...
上下定高 中间自适应_前端知识点之三栏布局 左右宽度固定 上下高度固定 中间自适应 几种解决办法...
weixin_39725594的博客
12-30 638
“题目：假设高度已知，请写出三栏布局，其中左、右栏的宽度为 300px，中间自适应”面试经常会遇到这样的一道题来考察对页面布局的基本功，相信大部分人都会想到通过 float 和绝对定位这两种方法来实现，但是想要在面试官面前得到更多的认可，还需要列举出更多的解决办法和优缺点：三栏布局 左右宽度固定 中间自适应 五种解决办法以下五种解决办法的公共样式/* 偷懒样式重置 */html * { margi...
上下高度固定，中间自适应，且可以滚动
晨曦的博客
03-01 1330
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 428
常用布局方式 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 761
css
CSS实现上下固定中间自适应布局
syx_12的博客
08-17 239
废话不多数哦，直接上代码！ <!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 两边固定中间自适应布局的实现
09-22
通过本文所介绍的四种实现“两边固定、中间自适应”的方法，我们可以更好地理解和掌握CSS布局技术。在实际开发中，应当结合具体的布局需求和浏览器兼容情况，灵活运用不同的布局技术来实现设计要求。
左右两列自适应中间列内容即随中间内容高度自适应的布局
09-25
如果中间内容由于某些原因导致高度增加，左右列能够自动调整高度以匹配中间列。实现这一点通常需要依赖CSS的弹性盒子模型（Flexbox）或是网格布局（Grid）技术。但在给定的代码片段中，由于只显示了表格布局，并没有...
css布局（上下固定，中间自适应）
u011391655的博客
06-20 8676
要实现页面的上下固定，中间自适应： 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
css实现上中下布局（上下固定，中间自适应）
闲云野鸟的博客
04-21 6597
先上效果图： 实现方法： 方法一： 这个最简单，利用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 7146
上下固定中间弹性滚动布局是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 688
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 3599
&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 8150
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
上下固定中间自适应布局
qq_45664442的博客
05-27 287
使用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布局技巧：三行布局，上下固定，中间自适应高度
"该资源提供了一种实现上中下三行布局的方法，其中上下两行高度固定，中间行根据浏览器高度自适应，并且内容能够垂直居中显示。这个布局方案在Firefox 2.0、Internet Explorer 6和7、Opera 8.5以及Safari等浏览器上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值