上下均可滚动的页面布局

最新推荐文章于 2024-01-11 23:00:00 发布
最新推荐文章于 2024-01-11 23:00:00 发布
阅读量117 收藏
点赞数
分类专栏： 函数 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songJunFeng1/article/details/127776226
版权 
<!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">
    <title>Document</title>
    <style>
        html, body{
           height: 100%;
           padding: 0;
           margin: 0;

        }
        .outBox {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .divTop {
            flex: 6;
            background: #ccc;
            overflow-y: auto;

        }

        .divBotom {
            flex: 4;
            background-color: #f99;
            overflow-y: auto;
        }

        ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
    </style>
</head>

<body>
    <div class="outBox">
        <div class="divTop">
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
        </div>
        <div class="divBotom">
            <div id="closeDom" style="float: right;">X</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
        </div>
    </div>
<script>
    let closeDom = document.querySelector('#closeDom');
    closeDom.addEventListener('click',()=>{
        console.log(121);
        document.querySelector('.divBotom').style.display = 'none'
    })
    
</script>
</body>

</html>

AF01
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css弹性盒子二
weixin_73143398的博客
09-12 2745
以下简单的布局需求是难以或不可能用这样的工具方便且灵活的实现的：在父内容里面垂直居中一个块内容。使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。这些弹性盒子都可以实现。。。我草指定元素的布局为弹性盒子首先，我们需要给父元素设置display：flexdiv {}
CSS day12 移动端布局练习
qq_34620296的博客
09-13 736
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
flex中的flex-grow、flex-shrink、flex-basis及缩写属性flex的使用场景
m0_51636525的博客
04-25 1万+
1.flex-grow决定了flex items 如何扩展拉伸 可以设置任意非负数字（正小数、正整数、0），默认是0 当flex-container在main axis（主轴）方向上有剩余size（空间）时，flex-grow属性才生效 三个宽度120px（3*120=360）的元素放在一个宽度400px的父级元素中，父级元素使用flex布局 <div class="container"> <div class="item item1">120px</d.
常用的几种布局方式---Flex 布局(垂直居中展示）
热门推荐
weixin_64310738的博客
02-14 2万+
常用的几种布局方式---Flex 布局(垂直居中展示）
jQuery定位上下滑动页面滚动代码
06-10
本项目涉及的是利用jQuery实现的一种上下滑动页面滚动定位的特效，它包括上下箭头图标以及锚点定位功能，能为用户提供更加便捷的浏览体验。 首先，我们要了解jQuery中的基本概念。jQuery的核心功能之一就是选择器，...
jQuery页面上下滚动触发区块动画特效
06-10
**jQuery页面上下滚动触发区块动画特效** 在网页设计中，用户交互体验是非常关键的一环，而动态效果可以显著提升用户体验。"jQuery页面上下滚动触发区块动画特效"是一种常见且吸引人的设计手法，它使得网页在用户...
页面布局有滚动条
10-31
在大多数情况下，垂直滚动条更为常见，用于浏览页面上下的内容；而水平滚动条则相对较少见，通常出现在宽度较大的内容区域，如代码编辑器或表格。滚动条的设计应当考虑到易用性和美观性，避免对主要内容造成干扰，...
jQuery上下滑动页面滚动定位特效代码
03-20
**jQuery上下滑动页面滚动定位特效代码详解** 在网页设计中，用户交互体验至关重要，而页面滚动定位特效能显著提升用户的浏览体验。本篇将详细讲解如何利用jQuery实现上下滑动页面滚动定位的功能，以及涉及的相关...
微信小程序页面上下滚动效果
10-16
在微信小程序中，实现页面上下滚动效果是一种常见的交互设计，它能提供良好的用户体验，使得用户可以轻松浏览和导航多内容的页面。以下我们将详细探讨如何在微信小程序中创建这种滚动效果。 首先，我们需要理解微信...
flex布局总结
LOxia的博客
03-22 2092
flex基础知识及携程网布局案例全部代码
springboot：实现文件上传下载实时进度条功能【附带源码】
55555的博客
10-23 1万+
记得刚入行的时候，做了一个文件上传的功能，因为上传时间较久，为了用户友好性，想要添加一个实时进度条，显示进度。奈何当时技术有限，查了许久也没用找到解决方案，最后不了了之。 近来偶然想到这个问题，于是决定整理一下实现方式，也为和我曾经一样碰壁的同学，提供一些思路。
Flex布局详细解析
前端卷王小白的博客
04-16 9673
Flex布局完整的详细解析,轻松学会并应用Flex布局
css 实现3D效果
蓝朽的小世界
04-03 5973
css实现3d效果
vue上传文件并显示进度条
IT菜鸟
07-29 1万+
keepFileList 用来备份选择的文件列表，因取消下载后文件列表会被清空，导致不能继续上传。手动使用submit()上传。
Element｜Upload结合Progress实现上传展示进度条
最新发布
Mr.小灰狼_随笔
01-11 6789
Element｜Upload结合Progress实现上传展示进度条 背景 ： 项目里的 附件上传 题型组件，用户在上传过程中，如果文件较大，上传过程较慢，而又没有一个类似 Loading... 的加载过程的话，会显得干愣愣的，用户体验较差，所以需要添加一个进度条来提示用户上传的进度，下面有两种方式，一种假的，一种真的，伙伴们可根据需求自行选取实现。
弹性（flex）布局
qq_43679416的博客
07-09 2633
什么是Flexbox ？ Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。它可以： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将元素装入容器 在 Flexbox 模型中，有三个核心概念： ..
vue项目实现上传进度条
qq_46344419的博客
07-04 3163
vue项目实现上传进度条
flex的含义
qq_43372535的博客
12-23 1607
flex的含义：flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可 选。 flex-grow ：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如 果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一 个项目的flex-gro...
滚动布局上下滚动属性是什么
05-01
在滚动布局中，上下滚动属性是指控制垂直方向上的滚动的属性。通常使用该属性来控制滚动视图或可滚动区域的滚动。在 CSS 中，可以使用以下属性来控制上下滚动： - overflow-y：控制垂直方向上的溢出文本的处理方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值