页面无滚动条，里面div各自有滚动条
一、双滚动条左右布局
实现效果
实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body,html {padding: 0;margin: 0;}.father {display: flex;flex: 1;overflow: hidden;}.left {flex: 1;background-color: red;max-height: 100vh;overflow-y: scroll;}.right {width: 300px;background-color: green;max-height: 100vh;overflow-y: scroll;}.ceshi {width: 100px;height: 100px;border: 1px solid black;}</style></head><body><div class="father"><div class="left">left<div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div></div><div class="right">right<div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div><div class="ceshi">111</div></div></div></body>
</html>二、双滚动条上下布局
实现效果
实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html,body {margin: 0;padding: 0;}.father {display: flex;width: 100%;flex-direction: column;overflow: hidden;}.top {height: 50px;background-color: aqua;}.content {flex: 1;max-height: calc(100vh - 50px);background-color: blueviolet;overflow-y: scroll;}.test {width: 100px;height: 100px;border: 1px solid red;}</style></head><body><div class="father"><div class="top">111</div><div class="content">content<div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div><div class="test">test</div></div></div></body>
</html>
相关文章：
页面无滚动条，里面div各自有滚动条
一、双滚动条左右布局 实现效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Doc…...
DIY-ESP8266移动PM2.5传感器-带屏幕-APP
本教程将指导您制作一台专业级的空气质量检测仪。这个项目使用经济实惠的ESP8266和PMS5003传感器，配合OLED显示屏，不仅能实时显示PM2.5数值，还能通过手机APP随时查看数据。总成本70元，相比几百的用的便宜，用的心理踏实…...
【Canvas与技法】椭圆画法
【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>椭圆的画法 Draft2</title><style type"text/css&quo…...
多核CPU调度是咋搞的？
其实很多情况下都有 这样的疑问 为什么多核CPU用着用着会“躺平”？ 为什么手机有 8 核，跑分时性能却不是核心数的翻倍？ 答案的钥匙，就藏在多核CPU的调度机制里。 为了更直观地理解，以一个《王者荣耀》游戏服务器为例…...
【Jenkins】pipeline 的基础语法以及快速构建一个 jenkinsfile
Jenkins Pipeline 是 Jenkins 中的一个强大功能，可以帮助你实现自动化构建、测试、部署等流程。Jenkins Pipeline 使用一种名为 Pipeline DSL（Domain Specific Language）的脚本语言，通常以 Jenkinsfile 形式存在，用于定…...
工作中如何提高技术实力？
点击“硬核王同学”，选择“关注/三连” 福利干货第一时间送达 大家好，我是硬核王同学。 其实这个问题困扰了我很久啊，不知道你们有没有跟我一样。 如何在工作中如何提高技术实力？ 随着时间的增加，越来越觉得工作上…...
画图，matlab，
clear;close all;clc;tic;dirOutput dir(*.dat); % 罗列所有后缀-1.dat的文件列表，罗列BDDATA的数据 filenames string({dirOutput.name}); % 提取文件名%% 丢包统计 FILENAMES [""]; LOSS_YTJ [ ]; LOSS_RAD [ ]; LOSS_ETH [ ]…...
Java虚拟机类加载(解析阶段)[虚方法表的生成以及其存在意义]
class字节码文件中的常量池结构详解-CSDN博客Java虚拟机类加载(解析阶段)-CSDN博客...
电子元器件与电路之-MOS管的介绍和作用
一、基本概念 MOS 管，或MOSFET，全称是Metal-Oxide-Semiconductor Field-Effect Transistor（金属 - 氧化物 - 半导体场效应晶体管）。和三极管利用电流控制电流不同，它是一种利用电场效应来控制电流的半导体器件。和三级…...
python实现word转html
目录 使用mammoth库 使用spire.doc库 使用mammoth库 mammoth库支持将word转为HTML和markdown格式的文件。 import mammothdef word_html(word_file):html_save_name fr{word_file.split(.)[0]}.htmlwith open(word_file, rb) as f:data mammoth.convert_to_html(f)with o…...
nginx模块ngx-fancyindex 隐藏标题中的 / 和遇到的坑
首先下载nginx源码，编译时加上 --add-module/usr/local/src/ngx-fancyindex/ 例如 ： ./configure --prefix/usr/local/nginx --with-select_module --with-poll_module --with-threads --with-file-aio --with-http_ssl_module --with-http_v2_module…...
第二十四天 循环神经网络（RNN）LSTM与GRU
LSTM（长短期记忆网络）和GRU（门控循环单元）是两种流行的循环神经网络变体，它们被设计来解决传统RNN在处理长序列数据时遇到的梯度消失和梯度爆炸问题。这两种网络都通过引入门控机制来控制信息的流动，从而能…...
RocketMQ如何保证消息顺序?
大家好，我是锋哥。今天分享关于【RocketMQ如何保证消息顺序?】面试题。希望对大家有帮助； RocketMQ如何保证消息顺序? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RocketMQ 作为一个分布式消息中间件，提供了高吞吐、低延迟的…...
LabVIEW实现GSM/GPRS通信
目录 1、GSM/GPRS通信原理 2、硬件环境部署 3、程序架构 4、前面板设计 5、程序框图设计 6、测试验证 本专栏以LabVIEW为开发平台，讲解物联网通信组网原理与开发方法，覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。 结合实际案例，展示如何利用LabVIEW和常用模块实现物联…...
关于如何做技术文档
在技术的浩瀚海洋中，一份优秀的技术文档宛如精准的航海图。它是知识传承的载体，是团队协作的桥梁，更是产品成功的幕后英雄。然而，打造这样一份出色的技术文档并非易事。你是否在为如何清晰阐释复杂技术而苦恼？是否纠结…...
基于多尺度动态卷积的图像分类
✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢，在这里我会分享我的知识和经验。&am…...
RK3576 介绍
RK3576 介绍 1 介绍1.1 概述1.2 RK3576、RK3588、RK3568 和 RK3399 的参数对比 2 DataSheet2.1 RK35762.2 RK35882.3 RK35682.4 RK3399 参考 1 介绍 1.1 概述 ARM 64位高性能八核通用处理器，丰富的PCIE/USB3.0/SATA/GMAC等各类高速及CAN FD/DSMC/UART/SPI/I2C/I3C…...
如何评估并持续优化AI呼出机器人的使用效果
如何评估并持续优化AI呼出机器人的使用效果 作者：开源呼叫中心FreeIPCC 随着人工智能技术的发展，AI呼出机器人在企业中的应用越来越广泛。这些智能系统不仅提高了工作效率、降低了成本，还改善了客户体验。然而，要确保AI呼出机器…...
Ubuntu上如何部署Nginx？
环境： Unbuntu 22.04 问题描述： Ubuntu上如何部署Nginx？ 解决方案： 在Ubuntu上部署Nginx是一个相对简单的过程，以下是详细的步骤指南。我们将涵盖安装Nginx、启动服务、配置防火墙以及验证安装是否成功。 1. 更新…...
制造业4.0：AI与机器人如何重塑生产线
引言：从传统到未来的转型 在轰鸣的生产线上，传统制造业曾以规模化生产和成本效益为核心竞争力，推动了全球工业化进程。然而，面对现代市场的多样化需求和激烈竞争，这种模式正暴露出越来越多的局限性：产能过剩…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN，但是…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...
高考志愿填报管理系统---开发介绍
高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发，采用现代化的Web技术，为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## 📋 系统概述 ### 🎯 系统定…...
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下，音视频内容犹如璀璨繁星，点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频，到在线课堂中知识渊博的专家授课，再到影视平台上扣人心弦的高清大片，音…...
二维FDTD算法仿真
二维FDTD算法仿真，并带完全匹配层，输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...
密码学基础——SM4算法
博客主页：christine-rr-CSDN博客 专栏主页：密码学 📌 【今日更新】📌 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 编辑…...