overflow：auto与felx结合的用法

最新推荐文章于 2024-07-28 01:07:16 发布
最新推荐文章于 2024-07-28 01:07:16 发布
阅读量513 收藏 1
点赞数 2
分类专栏： 项目 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seimeii/article/details/125583466
版权

overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。
flex中的属性
display: flex;
flex-direction: column; 主轴为垂直方向，起点在上沿。

1、overflow和flex布局搭配使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>overflow:auto的用法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />

    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header{
            width: 100%;
            height: 100px;
            background: #f99;
        }
        .content{
            width: 100%;
            height: 100%;
            overflow: auto;
            background: yellow;
            flex: 1;
        }
        .footer{
            width: 100%;
            height: 100px;
            background: #99f;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">
            <ul>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                这里的li要多写一些，这样才会显示效果，我这里为了省篇幅。
            </ul>
        </div>

        <div class="footer">
        </div>
    </div>
</body>
</html>

要实现overflow: auto;这个效果，首先布局，再写样式。
在样式中要在最外边的父盒子container，加入以下样式：

.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

还有就是一定要给html和body给宽度和高度100%；

html,body{
    width: 100%;
    height: 100%;
}

头部和底部都给固定的高度，一般的app的头部和底部都是固定的，像微信聊天记录。

.header{
    width: 100%;
    height: 100px;
    background: #f99;
}

.footer{
    width: 100%;
    height: 100px;
    background: #99f;
}

中间的content给定flex：1，并且加上我们的主角overflow：auto；超出的内容自动裁剪。

.content{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: yellow;
    flex: 1;
    }

效果图如下：
在这里插入图片描述
中间的内容区可以上下滑动，超出的部分自动裁剪了。

都挺好，刚刚好
关注
专栏目录
自学前端第二十六天:flex弹性盒子
weixin_47592060的博客
03-04 3114
CSS3 弹性布局 flex(给父盒子挂flex帅,让子元素排布练阵) 1.摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这
HTML+CSS+盒模型+flex布局+H5和CSS3新特性
m0_62351434的博客
01-12 525
目录HTML&C一、盒模型二.BFC三、清除浮动四、position定位的属性方法1. position: static;**2. position: relative;****3. position: absolute;****4. position: fixed;****5. inherit****6. sticky (黏性定位,吸顶效果)**五 、盒子水平垂直居中六、两栏布局、三栏（圣杯、双飞翼）作用：圣杯布局：优缺点：双飞翼布局：优缺点：圣杯与双飞翼的区别七、Flex 布局八、行内元素.块级
overflow:auto的用法详解
01-18
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>overflow:auto的用法</title> <meta name=viewport content=
overflow：auto的用法
热门推荐
boysky0015的博客
05-31 4万+
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下：<!DOCTYPE html> <html> <head>
flex-grow: 1 导致的滚动内容无限撑开父容器（嵌套 flex 导致 overflow: auto 失效）| 左右布局右边元素被挤出屏幕
最新发布
qq_41567818的博客
07-28 427
这个问题主要是 flex-grow: 1 引起的，这个概念可以搜索“Intrinsic and Extrinsic Sizing”以深入了解浏览器对于内容大小的计算机制逻辑。简单来说，就是 flex-grow: 1 启用时，该元素会无限“贪婪”的吃掉剩余的空间，并且尽可能的多容纳内部元素，他会不断向上检查，直到碰到了一个“固定大小”的元素，才会停止“贪婪”。
overflow的用法（auto）
Li_wen258的博客
05-15 4120
值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 overflow：auto的用法 当一个父容器中的子元素加浮动，那么父容器的高度不会被撑开；当在父容器中加...
overflow:auto
badbad_boy的专栏
04-11 7560
在制作页面，添加资料的时候，可能会遇到这种情况，客户提供的表格数据太宽，把页面撑开了，我也遇到这样的问题，当我尽量给表格减肥，发现还是不行的时候，偶忽然想到了overflow:auto，这个属性。 在这个大的数据表格外面套一个div，class是box，页面源码 ...... css这样写 .box{width:520px; overflow:auto;}css定义了这个div的overfl
CSS 属性 ----- overflow：auto 的使用
qq_43477721的博客
06-14 9586
overflow 属性规定当内容溢出元素框时发生的事情。定义当一个元素的内容太大而无法适应 块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。 MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 <!DOCTYPE html> <html lang="en"> <head> .
HTML&CSS 面试总结
weixin_61915741的博客
01-06 813
HTML&C 盒模型 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成 标准盒模型 （非IE浏览器） box-sizing:content-box；一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 怪异盒模型 （IE浏览器） box-sizing:border-box；一个块
6、微信小程序的布局
qq_40348833的博客
05-05 1万+
文章目录前言一、传统基本布局1.盒子模型2.显示方式Display3.定位position4.溢出属性Overflow5.浮动Float6.对齐二、Flex弹性布局1.基本属性2.使用示例 前言 wxss 指的是 Wei Xin Style Sheet，微信团队定义的一套用以实现小程序布局样式的层叠样式表，与CSS非常接近。可以理解成 wxss 是 css 的一个子集，也包括选择器、属性、值部分，同样具有层叠的特征。 一、传统基本布局 小程序会自动根据 wxml 文件名，自动将 wxss 进行加载，例如
CSS笔记（CSS禅意花园+CSS揭秘）
Koweico的博客
09-17 799
关联css与html 通过id在head标签中一一设置 <style type=”text/css”> #id名字{ Color：red; } </style> 新建css文件，在head标签中关联 <link href="文件名.css" rel="stylesheet" type="text/css" /> Css文件中： #id名字{color:red;} 在每个标签内直接加入style=“color：red；……” 书写规则 选择器 {
微信小程序overflow:auto; ios设备卡顿问题
01-03
我们在开发微信小程序的时候，经常会使用到overflow:auto;来实现局部滚动效果，稍微注意的码有就会发现，ios真机设备上会有很明显的卡顿，但安卓设置就没这个问题。 解决方式 view{ overflow:auto; -webkit-overflow-scrolling: touch; } 给 overflow 属性添加-webkit- （chrome、safari私有属性） 友情提醒：我推荐你使用微信小程序scroll-view组件实现局部滚动功能，scroll-view微信已经做好了兼容问题，不会出现这种不兼容的问题。用的时候记得给height设值哦
详解CSS中zoom属性或overflow:auto属性清除浮动的作用
11-21
前言 其实在CSS中的Zoom这个属性一般不为人知，甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。 因为Zoom属性是IE浏览器的专有属性，所以他清除浮动作用只适用于IE浏览器，而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用这两个属性。 我们在重构页面的时候经常会使用到一个大
overflow: auto;溢出自动显示
weixin_30861797的博客
03-06 110
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 ...
overflow
pscool的博客
05-12 806
overflow 可选值：visible | hidden | scroll | auto 默认值：visible 复合属性。检索或设置对象处理溢出内容的方式。overflow的效果等同于overflow-x + overflow-y。 visible： 对溢出内容不做处理，内容可能会超出容器。 hidden： 隐藏溢出容器的内容且不出现滚动条。 scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。 auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条
overflow: auto； 产生的padding，隐藏问题
men852654的博客
12-27 887
css注意问题
CSS属性overflow详解（auto hidden）
qq_44537625的博客
09-02 6249
overflow用在什么地方 overflow 属性规定当内容溢出元素框时发生的事情。 overflow有哪些属性值？ 1. visible 默认值。内容不会被修剪，会呈现在元素框之外。 2. hidden 内容会被修剪，并且其余内容是不可见的。 3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 ...
解决css中flex弹性盒子与overflow一起使用时导致的样式问题
guolijo的博客
02-03 3033
最近在写页面的时候，在一个div上同时设置了flex和overflow后，出现了一些问题。 需求： 网站顶部导航栏为两列布局，一列为宽度固定的logo，另一列的宽度自适应，且内部元素超出时可以滚动 需求比较简单，上来就是一个flex： <div class="header"> <div class="logo">LOGO</div> <div class="navigator"> <div class="item"&g
display:felx 居中
07-27
要将flex容器内的元素居中，可以使用以下CSS属性和值组合： ```css display: flex; justify-content: center; align-items: center; ``` 其中，`display: flex;`将容器设置为弹性布局。`justify-content: center;`将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

都挺好，刚刚好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值