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

html body 设置heigth 100%,body内元素设置margin-top出滚动条（margin 重叠问题）

article 2025/10/3 1:50:33

今天在用移动端的时候发现个问题，html,body 设置 height：100% 会出现纵向滚动条

<!DOCTYPE html>
<html>
<head>
<title>html5</title>
<style>
html, body {height: 100%;
}
* {margin: 0;padding: 0;
}
</style>
</head>
<body>
<div style="height: 100%;"><div style="margin-top: 44px;height: 200px;"></div>
</div>
</body>
</html>

出现原因：

margin 重叠（margin collapse）是指当两个垂直排列的块级元素的 margin 发生重叠时，最终的外边距会取两个 margin 值中的较大者，而不是两个 margin 的和。换句话说，margin 重叠会导致元素之间的实际间距被缩减。

因为子元素设置了 margin-top 且是最大值，所以父子的外边距都是子元素的外边距值了。

解决方法就是触发 BFC

解决方法一：

父元素设置 overflow: hidden; 或是 overflow: auto;

解决方法二：

父元素或子元素设置浮动

float: left

解决方法三：

父元素设置 position: relative;

子元素设置 position: absolute;

解决方法四：

父元素设置 ::before 让父元素和子元素不相临，就不会有外边距重叠问题

.parent::before {content: "";display: table;
}

或是父子元素间插入一个 display: flex; 的元素，触发 BFC

<span style="display: none"></span>

解决方法五：

父元素使用Flexbox或Grid布局，也可以避免外边距合并的问题。

解决方法六：

为父元素添加边框或内边距‌：通过给父元素添加border-top或padding-top，可以阻止子元素的margin-top与父元素的margin-top合并。

border-top: 0.1px solid red;
或是
padding-top: 0.1px;

html body 设置heigth 100%,body内元素设置margin-top出滚动条（margin 重叠问题）

今天在用移动端的时候发现个问题，html,body 设置 height：100% 会出现纵向滚动条 <!DOCTYPE html> <html> <head> <title>html5</title> <style> html, body {height: 100%; } * {margin: 0;padding: 0; } </sty…...

编程日记 2025/9/18 20:12:01

C语言模糊不清的知识

1、malloc、calloc、realloc的区别和用法 malloc实在堆上申请一段连续指定大小的内存区域，并以void*进行返回，不会初始化内存。calloc与malloc作用一致，只是calloc会初始化内存，自动将内存清零。realloc用于重新分配之前通过mallo…...

编程日记 2025/9/18 8:50:21

如何配置光猫+路由器实现外网IP访问内部网络？

文章目录前言一、网络拓扑理解二、准备工作三、光猫配置3.1 光猫工作模式3.2 光猫端口转发配置（路由模式时） 四、路由器配置4.1 路由器WAN口配置4.2 端口转发配置4.3 动态DNS配置（可选） 五、防火墙设置六、测试配置七、安全注意事…...

编程日记 2025/9/19 3:34:55

springboot3+vue3融合项目实战-大事件文章管理系统获取用户详细信息-ThreadLocal优化

一句话本质为每个线程创建独立的变量副本，实现多线程环境下数据的安全隔离（线程操作自己的副本，互不影响）。关键解读： 核心机制 • 同一个 ThreadLocal 对象（如示意图中的红色区域 tl）被多个线…...

编程日记 2025/9/18 20:21:43

【高数上册笔记篇02】：数列与函数极限

【参考资料】同济大学《高等数学》教材樊顺厚老师B站《高等数学精讲》系列课程 （注：本笔记为个人数学复习资料，旨在通过系统化整理替代厚重教材，便于随时查阅与巩固知识要点） 仅用于个人数学复习，因为课…...

编程日记 2025/9/27 10:57:08

c++STL-string的模拟实现

cSTL-string的模拟实现 string的模拟实现string的模拟线性表的实现构造函数析构函数获取长度（size）和获取容量（capacity）访问 [] 和c_str迭代器（iterator）交换swap拷贝构造函数赋值重载（&#x…...

编程日记 2025/9/25 8:25:11

YashanDB(崖山数据库)V23.4 LTS 正式发布

2024年回顾 2024年11月我们受邀去深圳参与了2024国产数据库创新生态大会。在大会上崖山官方发布了23.3。这个也是和Oracle一样采用的事编年体命名。那次大会官方希望我们这些在一直从事在一线的KOL帮助产品提一些改进建议。对于这样的想法，我们都是非常乐于合作…...

编程日记 2025/9/21 4:29:51

python 写一个工作简单番茄钟

1、图 2、需求番茄钟（Pomodoro Technique）是一种时间管理方法，由弗朗西斯科西里洛（Francesco Cirillo）在 20 世纪 80 年代创立。“Pomodoro”在意大利语中意为“番茄”，这个名字来源于西里洛最初使用的一个…...

编程日记 2025/9/18 8:50:23

C++.IP协议通信

C++IP协议通信 1. TCP协议通信1.1 服务端实现创建套接字绑定地址监听连接接受连接数据传输关闭连接1.2 客户端实现创建套接字连接服务器数据传输关闭连接1.3 示例代码服务端代码示例客户端代码示例绑定地址接收数据发送数据关闭套接字2.2 客户端实现创建套接字发送数据接收数据…...

编程日记 2025/8/12 22:10:25

css背景相关

背景书写 background: url(src); // 注意：在写动态样式时，backgournd赋值格式错误，是不会在浏览器dom的style上显示的 // 但是可以创建不可见的img，预加载来提高性能背景也会加载图片资源同img的src一样，background也…...

编程日记 2025/6/11 2:20:22

PyCharm 加载不了 conda 虚拟环境，不存在的

#工作记录前言在开发过程中，PyCharm 无法加载 Conda 虚拟环境是常见问题。在不同情况下，“Conda 可执行文件路径”的指定可能会发生变化，不会一尘不变，需要灵活处置。以下是一系列解决此问题的经验参考。检查 Conda 安装…...

编程日记 2025/9/18 3:39:49

设计模式学习整理

目录 UML类图设计模式六大原则 1.单一职责原则 2.里氏替换原则 3.依赖倒置原则 4.接口隔离原则 5.迪米特法则(最少知道原则) 6.开(放封)闭原则设计模式分类 1.创建型模式 2.结构型模式 4.行为型模式一、工厂模式(factory——简单工厂模式和抽象工厂模式) 1.1、…...

编程日记 2025/9/26 17:28:03

二分查找的理解

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h>int binary_search(int arr[], int k, int sz) {int left 0;int right sz - 1;//这个是下标，减一是因为在0开始的，怕越界（访问无效）while (left < right){int mid…...

编程日记 2025/9/18 1:28:49

线程实例化继承 Thread 类创建类继承自 Thread 类 . class MyThread extends Thread重写 run() 方法 . Overridepublic void run(){// 线程要执行的任务代码}实例化自定义线程类 . 实现 Runnable 接口创建类实现 Runnable 接口 . class MyRunnable implements Runnable实…...

编程日记 2025/9/26 14:14:40

卫宁健康WiNGPT3.0与WiNEX Copilot 2.2：医疗AI创新的双轮驱动分析

引言：医疗AI的双翼时代在医疗信息化的浪潮中，人工智能技术的深度融入正在重塑整个医疗行业。卫宁健康作为国内医疗健康和卫生领域数字化解决方案的领军企业，持续探索AI技术在医疗场景中的创新应用。2025年5月10日，在第29届中国医院信息网络大会（CHIMA2025）上，卫宁健康…...

编程日记 2025/10/2 16:00:37

I2C通讯

3.1. 本章节的代码仓库 1 2 3 4 5 6 #如之前有获取则可跳过 #获取仓库 git clone https://gitee.com/LubanCat/lubancat_rk_code_storage.git#代码所在的位置 lubancat_rk_code_storage/quick_start/i2c3.2. i2c I2C(Inter－Integrated Circuit)是一种通用的总线协…...

编程日记 2025/9/18 19:54:52

Excel实现单元格内容拼接

一、应用场景： 场景A：将多个单元格拼接，比如写测试用例时，将多个模块拼接，中间用“-”隔开场景B：将某单元格内容插入另一单元格固定位置（例如在B1中添加A1的内容） 二、实际应用&a…...

编程日记 2025/9/19 18:14:50

2025前端面试遇到的问题(vue+uniapp+js+css)

Vue相关面试题 vue2和vue3的区别一、核心架构差异特性Vue2Vue3响应式系统基于Object.defineProperty基于Proxy（支持动态新增/删除属性）代码组织方式Options API（data/methods分块）Composition API（逻辑按功能聚合&am…...

编程日记 2025/9/22 20:16:38

大模型核心基础简介

大模型核心基础简介目录一、大模型简介定义核心特征二、大模型的发展历程1. 早期奠基（1950s–2010s）1950s–1980s：神经网络萌芽1990s–2010s：深度学习前夜 2. 架构革命：Transformer的诞生与预训练范式（20…...

编程日记 2025/7/16 20:27:19

广东省省考备考（第八天5.11）—言语：逻辑填空（每日一练）

错题解析第一空，搭配“期盼”，且根据“生命，是来自上天的馈赠”，可知父母对孩子的出生是非常期盼的。A项“望穿秋水”，形容对远地亲友的殷切盼望，C项“望眼欲穿”，形容盼望殷切，均…...

编程日记 2025/10/2 16:00:49

github+ Picgo+typora

github Picgotypora 本文将介绍如何使用Picgo在typora中实现上传服务创建github仓库以及配置token 创建仓库注意需要Initialize 添加README 配置为public 配置token github点击头像找到setting 选择Developer setting 配置token generate 选第一个第二个都行(我这里选第…...

编程日记 2025/9/18 1:09:22

[网安工具] IP 信息收集工具 —— LBD · 使用手册

🌟想了解其它网安工具？看看这个：[网安工具] 网络安全工具管理 —— 工具仓库管理手册 lbd | Kali Linux ToolsVideolbd Usage ExampleTest to see if the target domain (example.com) is using a load balancer:rootkali:~# lbd example.c…...

编程日记 2025/9/18 1:13:05

本贴会成为记录贴

这几天有些心力交瘁了一方面带着对互联网下行的伤心，一方面是对未来的担忧一转眼好像就是20 21那个可以在宿舍肆意玩手机大学生活可是我不小了是个26岁的人了时间很快快的就好像和自己开了一个玩笑我以为可以找到一个自己足够喜欢的可爱的人可是我没有 …...

编程日记 2025/7/8 16:19:50

说说es配置项的动态静态之分和集群配置更新API

这天因为某件工作来到了es官网某个参数配置相关的页面，注意到了下图圆圈里的“Dynamic”： 链接：https://www.elastic.co/guide/en/elasticsearch/reference/8.1/modules-cluster.html#misc-cluster-settings 显然这是对配置项的一个描述&am…...

编程日记 2025/10/2 16:00:51

LLMs之Mistral Medium 3：Mistral Medium 3的简介、安装和使用方法、案例应用之详细攻略

LLMs之Mistral Medium 3：Mistral Medium 3的简介、安装和使用方法、案例应用之详细攻略目录 Mistral Medium 3 简介 1、Mistral Medium 3 特点 Mistral Medium 3 安装和使用方法 2、使用方法 (1)、创建Agent (2)、模型微调 Mistral Medium 3 案例应用 Mistr…...

编程日记 2025/10/2 16:00:54