flex上下固定中间滚动条

最新推荐文章于 2023-11-25 13:48:24 发布
最新推荐文章于 2023-11-25 13:48:24 发布
阅读量170 收藏
点赞数
原文链接：http://www.cnblogs.com/lzx12/p/6986878.html
版权

<!DOCTYPE html>

 

<html>

 

<head lang="en">

 

<meta charset="UTF-8">

 

<title>flex上下固定中间滚动布局</title>

 

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

 

<style type="text/css">

 

 

 

*{padding: 0;margin: 0;}

 

html,body{height: 100%}

 

.wrap{width: 100%;height: 100%;}

 

.header,.footer{height:40px;line-height:40px;}

 

.main{overflow:auto;-webkit-overflow-scrolling: touch;}

 

/* ============================================================

 

flex：定义布局为盒模型

 

flex-v：盒模型垂直布局

 

flex-1：子元素占据剩余的空间

 

flex-align-center：子元素垂直居中

 

flex-pack-center：子元素水平居中

 

flex-pack-justify：子元素两端对齐

 

兼容性：ios 4+、android 2.3+、winphone8+

 

============================================================ */

 

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

 

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

 

.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

 

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

 

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

 

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

 

</style>

 

</head>

 

<body>

 

<div class="wrap flex flex-v">

 

<div class="header">我想要它固定顶部部</div>

 

<div class="main flex-1">

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p><input value="54545455654"/></p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

<p>高度自动适应</p>

 

</div>

 

<div class="footer">我想要它固定底部<input value="54545455654"/></div>

 

</div>

 

 

 

</body>

 

</html>

转载于:https://www.cnblogs.com/lzx12/p/6986878.html

weixin_30492601
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
『前端日志』用flex实现嵌套页面的顶部和底部固定，中间内容随窗口大小自动产生滚动条
mad_house的博客
05-05 785
本来想用position:fixed来实现顶部底部固定。我用vh来指定内容高度，以适应窗口大小，而顶部和底部因为使用了图片做背景，他们的高度只能以px为单位，因此总是有误差无法消除。 然后借鉴了这篇文章：仿淘宝使用flex布局实现页面顶部和底部的固定布局 但是还有一个问题，我的页面除了顶部的navigation导航栏和底部的按钮栏以外，中间的内容部分还嵌套了一个tabs标签栏，因此仿照上面的例子多...
flex上下固定中间滚动布局
jgftyfc的博客
01-23 654
flex上下固定中间滚动布局
FLEX给页面添加滚动条实现思路及代码
10-26
给页面添加滚动条的方法有很多，使用js获取浏览器窗口的宽高，根据浏览器窗口宽高修改样式，让滚动条出现，具体的实现如下，需要的朋友可以参考下
基于flex弹性布局实现“头尾固定，中间滚动”的页面
qq_26780317的博客
06-19 6037
    最近，在写微信端购物商城的项目时，有遇到“头尾固定，中间滚动的”页面布局，基于现在很多购物类APP都是这种布局，在此记录一下。比如，淘宝的首页： 一、相关实例介绍         头部搜索框和底部菜单栏的内容固定，中间区域部分的内容，随着游览的内容不断滚动，滚动的同时，也不会影响头部和尾部的位置，也不会遮盖住头部和尾部的内容。         这种布局运用很多，有时候，会用fix...
flex布局
syh12345_的博客
07-30 205
1.给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；在item里面使用的任何布局都会失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width: ...
移动端，用flex弹性盒模型布局实现头部、底部固定，中间内容区可滑动浏览的效果
pinbolei的博客
12-25 3435
H5开发移动端项目时，常常会遇到此类问题，顶部navbar，底部tabbar,中间滑动展示内容，如果用position:fixed;往往会出各种问题，这时，你不如考虑一下flex布局，在移动端上使用，是真的香！ 1.css部分 body{ padding: 0; margin: 0; } html,body{ ...
html 上下固定中间滚动,flex布局实现上下固定中间滑动的布局方式
weixin_39791386的博客
06-09 1157
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下:例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。简单介绍一下如何实现固定头部和尾部，中间部分可滑动，使用flex布局1.设置html，body高度为100%2.设置最外层div的布局方式为弹性布局display:flex;3.设置最外层div的主轴方向为flex-direction: column...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
flex滚动条三种实现方式
08-19
总结来说，Flex布局中的滚动条实现主要分为默认滚动条和自定义滚动条两种方式。默认滚动条适用于快速开发，而自定义滚动条则能更好地融入到页面设计中，提供更一致的用户体验。需要注意的是，自定义滚动条的兼容性和...
Flex中怎么给表格中的滚动条定位避免刷新回到原处
10-25
1. 使用滚动监听事件，当滚动条滚动到指定位置时，通过监听函数保存位置信息。利用Flex的Data Binding或者事件监听机制，可以在滚动事件触发时保存当前的垂直偏移量（scrollTop）。 2. 在Flex应用程序中，通常可以...
flex中使用css样式修改TextArea滚动条的皮肤代码
10-27
1. 滑块（thumbSkin）：表示滚动条中间可以被拖动的部分的皮肤。在这个例子中，通过ClassReference设置为null，表示使用默认皮肤。 2. 滑道（trackSkin）：表示滚动条主体部分的皮肤。在这个例子中，通过Embed标签...
div 布局_CSS flex 布局，头部和底部固定，中间出现滚动条
weixin_39673742的博客
11-21 960
文章目录原理说明案例（原理说明）案例二（回字形布局）案例 （计算出中间组件的高度，剩下的百分百）原理说明利用flex布局，很容易实现“左右两边固定，剩余100%”的布局模式利用flex-direction: column;样式，就很容易实现“顶部和底部固定，中间100%”的情况要设置html,body的高度为100%;否则设置的div高度为100%是0px;必须要保证设置的控件高度从html&gt...
flex 上下固定中间滚动布局
mrzhangdulin的博客
04-21 547
flex上下固定中间滚动布局 传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。 上图如果在PC端中，我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果，而...
flex布局（滚动条问题）
最新发布
weixin_44042792的博客
11-25 962
1.flex布局有时候overflow: auto不生效，解决办法如下。
【Css】移动端用flex实现DIV高度自适应屏幕和带滚动条效果（代码示例）
【敦厚的曹操】的专栏
01-10 3335
一、手机移动端的默认设置像素，宽度为980px 也可以利用meta来设置像素 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=200px“ /> 二、设计图的宽度一般 是750px 或 1125px ...
使用flex的垂直居中对齐时，溢出滚动条，内容显示不全
wang_59881的博客
02-07 2374
使用flex垂直居中对齐，div内的三个盒子长度未知，由内容撑开，超出父盒子宽度后滚动条显示，最左侧盒子内容会显示不全。用inline-flex替代flex，在flex父级再添加一个div盒子，设置最小宽度。正常box1盒子应该是红色宽度，用了flex的缘故，只显示了黄色部分，超出部分隐藏了。宽度不超过父盒子宽度时也是居中展示，超过后也能正常显示最初左侧数据。inline-flex：将对象作为内联块级弹性伸缩盒显示。flex： 将对象作为弹性伸缩盒显示。
解决 Flex 子元素居中，溢出滚动后被裁切的问题
jayccx的专栏
08-11 3030
晚上修改了小窝页面右侧目录树的定位，并且修改了二级导航栏的布局。其原有的设计采用的是display: flex+justify-content: center进行居中的，但这样也遇到了一个问题。如果我使用white-space: nowrap禁止文字换行（Flex 默认也是不换行，但是并不会溢出，而是会使得子元素宽度变窄导致文字被换行），并结合overflow: auto来使得内容出现滚动条，则会出现左侧被“裁切”掉的效果。 上网搜索了一番，出现这个效果的原因，主要是因为 Flex 居...
Flex 布局设置滚动条失效
weixin_49809163的博客
03-09 4488
使用 Flex 布局时设置滚动条失效，导致盒子被撑开
页面布局--上下固定中间自适应出现滚动条布局
qq_26702033的博客
03-07 7122
上下固定中间弹性滚动布局是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
vue2开发h5怎么实现上下固定中间滚动
05-19
可以使用CSS的flex布局实现上下固定，中间滚动。具体实现步骤如下： 1. 使用一个父容器包含上下固定的两个子容器和中间可滚动的子容器。 2. 使用flex布局，将父容器设置为flex容器，并设置flex-direction属性为column，这样子容器会竖直排列。 3. 将上下固定的两个子容器设置为固定高度，并使用flex属性将它们固定在父容器的顶部和底部。 4. 将中间可滚动的子容器设置为弹性容器，并使用flex-grow属性使其占据剩余的空间。 5. 为中间可滚动的子容器添加overflow-y: auto属性，使其出现纵向滚动条。 以下是示例代码： ``` <div class="container"> <div class="header">Header</div> <div class="content"> <!-- 中间可滚动的子容器 --> </div> <div class="footer">Footer</div> </div> <style> .container { display: flex; flex-direction: column; height: 100vh; /* 父容器占据整个视口高度 */ } .header, .footer { height: 50px; /* 上下固定的子容器高度 */ flex: none; /* 不占据剩余空间 */ } .content { flex: 1; /* 占据剩余空间 */ overflow-y: auto; /* 添加纵向滚动条 */ } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值