当前位置： 首页 > news >正文

页面无滚动条，里面div各自有滚动条

news 2026/5/16 5:11:20

一、双滚动条左右布局

实现效果
在这里插入图片描述
实现代码

<!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…...

编程日记 2024/12/21 8:40:09

DIY-ESP8266移动PM2.5传感器-带屏幕-APP

本教程将指导您制作一台专业级的空气质量检测仪。这个项目使用经济实惠的ESP8266和PMS5003传感器&#xff0c;配合OLED显示屏&#xff0c;不仅能实时显示PM2.5数值&#xff0c;还能通过手机APP随时查看数据。总成本70元&#xff0c;相比几百的用的便宜&#xff0c;用的心理踏实…...

编程日记 2024/12/21 8:39:08

【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…...

编程日记 2024/12/21 8:34:03

多核CPU调度是咋搞的？

其实很多情况下都有 这样的疑问 为什么多核CPU用着用着会“躺平”&#xff1f; 为什么手机有 8 核&#xff0c;跑分时性能却不是核心数的翻倍&#xff1f; 答案的钥匙&#xff0c;就藏在多核CPU的调度机制里。 为了更直观地理解&#xff0c;以一个《王者荣耀》游戏服务器为例…...

编程日记 2024/12/21 8:33:02

【Jenkins】pipeline 的基础语法以及快速构建一个 jenkinsfile

Jenkins Pipeline 是 Jenkins 中的一个强大功能&#xff0c;可以帮助你实现自动化构建、测试、部署等流程。Jenkins Pipeline 使用一种名为 Pipeline DSL&#xff08;Domain Specific Language&#xff09;的脚本语言&#xff0c;通常以 Jenkinsfile 形式存在&#xff0c;用于定…...

编程日记 2024/12/21 8:27:57

工作中如何提高技术实力？

点击“硬核王同学”&#xff0c;选择“关注/三连” 福利干货第一时间送达 大家好&#xff0c;我是硬核王同学。 其实这个问题困扰了我很久啊&#xff0c;不知道你们有没有跟我一样。 如何在工作中如何提高技术实力&#xff1f; 随着时间的增加&#xff0c;越来越觉得工作上…...

编程日记 2024/12/21 8:24:55

画图，matlab，

clear;close all;clc;tic;dirOutput dir(*.dat); % 罗列所有后缀-1.dat的文件列表&#xff0c;罗列BDDATA的数据 filenames string({dirOutput.name}); % 提取文件名%% 丢包统计 FILENAMES [""]; LOSS_YTJ [ ]; LOSS_RAD [ ]; LOSS_ETH [ ]…...

编程日记 2024/12/21 8:23:54

Java虚拟机类加载(解析阶段)[虚方法表的生成以及其存在意义]

class字节码文件中的常量池结构详解-CSDN博客Java虚拟机类加载(解析阶段)-CSDN博客...

编程日记 2024/12/21 8:20:51

电子元器件与电路之-MOS管的介绍和作用

一、基本概念 MOS 管&#xff0c;或MOSFET&#xff0c;全称是Metal-Oxide-Semiconductor Field-Effect Transistor&#xff08;金属 - 氧化物 - 半导体场效应晶体管&#xff09;。和三极管利用电流控制电流不同&#xff0c;它是一种利用电场效应来控制电流的半导体器件。和三级…...

编程日记 2024/12/21 8:18:49

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…...

编程日记 2024/12/21 8:16:47

nginx模块ngx-fancyindex 隐藏标题中的 / 和遇到的坑

首先下载nginx源码&#xff0c;编译时加上 --add-module/usr/local/src/ngx-fancyindex/ 例如 &#xff1a; ./configure --prefix/usr/local/nginx --with-select_module --with-poll_module --with-threads --with-file-aio --with-http_ssl_module --with-http_v2_module…...

编程日记 2024/12/21 8:15:46

第二十四天 循环神经网络（RNN）LSTM与GRU

LSTM&#xff08;长短期记忆网络&#xff09;和GRU&#xff08;门控循环单元&#xff09;是两种流行的循环神经网络变体&#xff0c;它们被设计来解决传统RNN在处理长序列数据时遇到的梯度消失和梯度爆炸问题。这两种网络都通过引入门控机制来控制信息的流动&#xff0c;从而能…...

编程日记 2024/12/21 8:11:43

RocketMQ如何保证消息顺序?

大家好&#xff0c;我是锋哥。今天分享关于【RocketMQ如何保证消息顺序?】面试题。希望对大家有帮助&#xff1b; RocketMQ如何保证消息顺序? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RocketMQ 作为一个分布式消息中间件&#xff0c;提供了高吞吐、低延迟的…...

编程日记 2024/12/21 8:08:40

LabVIEW实现GSM/GPRS通信

目录 1、GSM/GPRS通信原理 2、硬件环境部署 3、程序架构 4、前面板设计 5、程序框图设计 6、测试验证 本专栏以LabVIEW为开发平台，讲解物联网通信组网原理与开发方法，覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。 结合实际案例，展示如何利用LabVIEW和常用模块实现物联…...

编程日记 2024/12/21 8:07:38

关于如何做技术文档

在技术的浩瀚海洋中&#xff0c;一份优秀的技术文档宛如精准的航海图。它是知识传承的载体&#xff0c;是团队协作的桥梁&#xff0c;更是产品成功的幕后英雄。然而&#xff0c;打造这样一份出色的技术文档并非易事。你是否在为如何清晰阐释复杂技术而苦恼&#xff1f;是否纠结…...

编程日记 2024/12/21 8:04:35

基于多尺度动态卷积的图像分类

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

编程日记 2024/12/21 8:01:31

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位高性能八核通用处理器&#xff0c;丰富的PCIE/USB3.0/SATA/GMAC等各类高速及CAN FD/DSMC/UART/SPI/I2C/I3C…...

编程日记 2024/12/21 7:57:26

如何评估并持续优化AI呼出机器人的使用效果

如何评估并持续优化AI呼出机器人的使用效果 作者&#xff1a;开源呼叫中心FreeIPCC 随着人工智能技术的发展&#xff0c;AI呼出机器人在企业中的应用越来越广泛。这些智能系统不仅提高了工作效率、降低了成本&#xff0c;还改善了客户体验。然而&#xff0c;要确保AI呼出机器…...

编程日记 2024/12/21 7:56:25

Ubuntu上如何部署Nginx？

环境&#xff1a; Unbuntu 22.04 问题描述&#xff1a; Ubuntu上如何部署Nginx&#xff1f; 解决方案&#xff1a; 在Ubuntu上部署Nginx是一个相对简单的过程&#xff0c;以下是详细的步骤指南。我们将涵盖安装Nginx、启动服务、配置防火墙以及验证安装是否成功。 1. 更新…...

编程日记 2024/12/21 7:55:23

制造业4.0：AI与机器人如何重塑生产线

引言&#xff1a;从传统到未来的转型 在轰鸣的生产线上&#xff0c;传统制造业曾以规模化生产和成本效益为核心竞争力&#xff0c;推动了全球工业化进程。然而&#xff0c;面对现代市场的多样化需求和激烈竞争&#xff0c;这种模式正暴露出越来越多的局限性&#xff1a;产能过剩…...

编程日记 2024/12/21 7:51:20

CM201-1-CH刷机避坑指南：S905L3B+UWE5621DS芯片组合刷机时，为什么必须取消‘擦除flash’？

CM201-1-CH刷机避坑指南&#xff1a;S905L3BUWE5621DS芯片组合的特殊性解析 每次刷机操作都像一场精密手术&#xff0c;而CM201-1-CH这款搭载S905L3B主控与UWE5621DS无线芯片组合的机顶盒&#xff0c;则像一位"特殊体质"的患者——常规操作可能导致不可逆的"医疗…...

编程新知 2026/5/16 3:36:15

基于API网关与Go的物联网设备管理平台架构设计与实践

1. 项目概述&#xff1a;一个为冲浪模拟器设计的API网关最近在折腾一个很有意思的项目&#xff0c;叫WindsurfPoolAPI。乍一看这个名字&#xff0c;你可能会联想到风帆冲浪或者游泳池&#xff0c;但实际上&#xff0c;它是一个为“冲浪模拟器”这类设备或应用场景设计的后端API…...

编程新知 2026/5/16 3:30:10

如何快速下载并配置 Taotoken CLI 实现多模型一键接入

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 如何快速下载并配置 Taotoken CLI 实现多模型一键接入 对于需要统一团队开发环境的开发者而言&#xff0c;手动为每个工具配置 API…...

编程新知 2026/5/16 2:44:16

政务知识图谱 + 大模型：打造可解释、可信任 AI

在数字政务加速迈向智能化的今天&#xff0c;AI 技术已深度渗透到政务服务、社会治理、机关办公等各个场景&#xff0c;从智能问答、政策解读到辅助决策、风险预警&#xff0c;AI 正在成为提升政务效能、优化服务体验的核心力量。但与此同时&#xff0c;传统 AI 技术在政务领域…...

编程新知 2026/5/16 2:35:28

从枚举到成像：VisionMaster连接海康工业相机的实战避坑指南

1. 工业相机连接前的硬件准备 第一次用VisionMaster连接海康工业相机时&#xff0c;硬件连接是最容易出问题的环节。我遇到过不少新手工程师因为电源接反或者网线没插好&#xff0c;折腾半天找不到设备的情况。这里分享几个关键细节&#xff1a; 首先是供电问题。海康工业相机通…...

编程新知 2026/5/16 2:24:50

Win10 任务管理器点击“详细信息”崩溃 + U盘 PPTX 无法删除/复制（0x800700EA）问题排查

一、问题现象 最近遇到一个比较奇怪的问题&#xff1a; Win10 系统 任务管理器只能以“小窗口模式”打开 点击“详细信息”后直接崩溃 事件查看器报错&#xff1a; 错误应用程序名称: taskmgr.exe 版本: 10.0.19041.6280同时还伴随另一个问题&#xff1a; U盘中的 .pptx …...

编程新知 2026/5/16 1:26:02

STM32F4用HAL库驱动MPU6050，从引脚重映射到数据读取的保姆级避坑指南

STM32F4 HAL库驱动MPU6050全流程实战&#xff1a;从引脚重映射到数据解析的深度避坑指南 第一次接触STM32F4和MPU6050的组合时&#xff0c;我花了整整三天时间才让传感器吐出第一个有效数据。不是I2C通信失败&#xff0c;就是数据全为零&#xff0c;最崩溃的是明明按照教程操作…...

编程新知 2026/5/15 23:14:22

终极指南：如何在Jetson/Raspberry Pi上快速部署CLIP-as-service边缘AI搜索服务 [特殊字符]

终极指南&#xff1a;如何在Jetson/Raspberry Pi上快速部署CLIP-as-service边缘AI搜索服务 &#x1f680; 【免费下载链接】clip-as-service &#x1f3c4; Scalable embedding, reasoning, ranking for images and sentences with CLIP 项目地址: https://gitcode.com/gh_mi…...

编程新知 2026/5/15 22:46:52

localForage性能监控终极指南：实时追踪存储操作的关键指标

localForage性能监控终极指南&#xff1a;实时追踪存储操作的关键指标 【免费下载链接】localForage &#x1f4be; Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API. 项目地址: https://gitcode.com/gh_mirrors/lo/l…...

编程新知 2026/5/15 22:32:02

从数据到角度：手把手调试大疆C板BMI088，解决姿态解算精度跳动的那些坑

从数据到角度&#xff1a;手把手调试大疆C板BMI088&#xff0c;解决姿态解算精度跳动的那些坑 调试嵌入式系统中的传感器数据&#xff0c;尤其是姿态解算这类对精度要求极高的应用&#xff0c;往往需要开发者具备跨领域的知识储备和丰富的实战经验。本文将分享我在使用大疆C板搭…...

编程新知 2026/5/15 22:00:22