width设置100vh但出现横向滚动条的问题

embedded/2024/11/28 3:30:12/

在去做flex左右固定,中间自适应宽度的布局时, 发现这样一个问题:

就是我明明是宽度占据整个视口, 但是却多出了横向的滚动条

效果是这样的

在这里插入图片描述

把width改成100%,就没有滚动条了

原因:

body是有默认样式的, 会有一定的默认边距, 把默认边距清除就是正常的了

同时, 如果把高度设置超过100vh, width: 100vw 时,元素的宽度会占据整个视口的宽度,包括滚动条的宽度

这时,滚动条会占据一定的宽度,这会导致元素的实际宽度超过视口的可见宽度,从而出现横向滚动条。

为什么设置为width: 100%时就不会有滚动条:

width: 100% 表示元素的宽度是其父元素宽度的 100%。具体来说:

父元素宽度:父元素的宽度是视口的宽度减去滚动条的宽度(如果有滚动条)。

子元素宽度:子元素的宽度会根据父元素的宽度进行计算,不会超过父元素的宽度。

因此,即使视口有滚动条,width: 100% 的元素宽度也不会超过视口的可见宽度,所以不会出现横向滚动条。

解决方法:

在width中减去滚动条的宽度就可以了, 一般是17px, calc(100vw - 17px)

或者使用width: 100%

代码

<!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>css">/*去除页面默认边距html body{padding: 0;margin: 0;}*/.wrap {display: flex;//如果高度大于100vh需要将width:100vw的部分减去滚动条宽度height: 100vh;width: 100vw;overflow: hidden;}.left {width: 200px;background-color: yellow;}.middle {flex: 1;background-color: green;}.right {width: 200px;background-color: red;}</style></head><body><div class="wrap"><div class="left"></div><div class="middle"></div><div class="right"></div></div></body>
</html>

http://www.ppmy.cn/embedded/141084.html

相关文章

第76期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…

UE5 Spawn Actor from Class 节点

在 UE5 中&#xff0c;Spawn Actor from Class 节点用于在蓝图中动态地创建一个新的 Actor 实例。你可以使用这个节点来在游戏中生成不同类型的对象&#xff08;如敌人、道具、场景物件等&#xff09;&#xff0c;并将其放置到指定的位置。 如何使用 Spawn Actor from Class 节…

java 老矣,尚能饭否?

随笔 从千万粉丝“何同学”抄袭开源项目说起&#xff0c;为何纯技术死路一条&#xff1f; 数据源的统一与拆分 监控报警系统的指标、规则与执行闭环 java 老矣&#xff0c;尚能饭否&#xff1f; 一骑红尘妃子笑&#xff0c;无人知是荔枝来! java 老吗&#xff1f; 去年看…

【Linux】基础IO-文件描述符

【Linux】基础IO C语言的文件接口文件的初步理解文件IO的系统接口打开文件writeread 文件描述符fd语言层的fd文件描述符的分配规则重定向和缓冲区的理解重定向缓冲区作用刷新策略C语言的缓冲区 模拟实现重定向检查是否是重定向执行命令 0、1、2的作用 C语言的文件接口 这里我们…

QT入门详解,创建QT应用

一、Qt概述 1.1 什么是Qt Qt是一个跨平台的C++应用程序开发框架。它由Qt Company(前身为为Nokia)开发,用于开发图形用户界面、嵌入式系统、以及其他应用程序,支持Windows、macOS、Linux、Android和iOS等多个操作系统。 Qt框架提供了丰富的功能和工具,包括图形用户界面设计Q、…

Vue 中父子组件间的参数传递与方法调用

1. 引言 Vue中&#xff0c;组件化设计是构建用户界面的核心理念。 Vue.js 作为一个流行的前端框架&#xff0c;采用了组件化的方式&#xff0c;使得开发者能够更好地管理和复用代码。 在 Vue 中&#xff0c;父子组件之间的参数传递和方法调用是实现组件间交互的重要手段。 本文…

docker如何安装mysql8

第一步 直接docker pull 拉取镜像 docker pull mysql:8 如果使用这个命令出现类似这种错误 Error response from daemon: Get "https://registry-1.docker.io/v2/": dial tcp 124.11.210.175:443: connect: connection refused 首先看443端口是否在云服务器上打开&a…

【速通GO】数据类型与变量和常量

独立站原文 数据类型 总览 布尔型数字类型字符串类型派生类型 派生类型 指针类型&#xff08;Pointer&#xff09;数组类型结构化类型 (struct)Channel 类型函数类型切片类型接口类型&#xff08;interface&#xff09;Map 类型 数值类型 整型 序号类型描述1uint8无符号…