首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当设置width: 100vh时,div下的额外空白(白色)空间

当设置width: 100vh时,div下的额外空白(白色)空间是由于CSS盒模型的影响。CSS中的盒模型由四个部分组成:内容区域、内边距、边框和外边距。width属性定义了元素的内容区域的宽度,但是并不包括内边距、边框和外边距。

当设置width: 100vh时,元素的宽度被设置为视口高度的100%,而视口高度是浏览器窗口的高度。然而,这个百分比只适用于内容区域的宽度,并不包括内边距、边框和外边距。因此,如果div元素有设置了内边距、边框或外边距,那么这些部分会在内容区域的基础上增加额外的宽度,导致元素的总宽度超过了100vh。

解决这个问题的一种方法是使用box-sizing属性,并将其设置为border-box。这样,元素的宽度将包括内边距和边框,而不会超出100vh。可以使用以下CSS代码解决这个问题:

div { box-sizing: border-box; width: 100vh; }

此外,还可以通过调整内边距、边框和外边距的值,以使元素适应100vh的宽度。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS Grid 布局不好理解?可借助 CSS Grid Generator 快速上手并掌握 Grid 布局!

CSS Grid 布局示例 当我正在学习一些东西时,我发现最好的学习方法是使用现有的工具构建实用的东西。...接着在 CSS Grid Generator 界面的右侧更新对应的以下内容: 行: 4 列: 3 列间距: 20 行间距: 20 间距让咱们的内容之间有一定的空白。...Grid还引入了一个额外的长度单位,以帮助各位创建灵活的Grid轨道。新的fr单元表示网格容器中可用空间的一小部分。 第二行的1fr会告诉区域占用剩余的可用空间。...如果将容器设置为100vh,就会占据整个页面的内容,列也是如此。 CSS Grid Generated 生成的代码 ?...fr单位(加餐) 剩余空间分配数,用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

3.1K20

使用 CSS Grid Generator来快速使用及学习 Grid 布局

第一次进入是界面是这样子的: image.png CSS Grid 布局示例 当我正在学习一些东西时,我发现最好的学习方法是使用现有的工具构建实用的东西。...首先从一个典型的布局开始,如下所示: image.png 接着在 CSS Grid Generator 界面的右侧更新对应的以下内容: 行: 4 列: 3 列间距: 20 行间距: 20 间距让咱们的内容之间有一定的空白...Grid还引入了一个额外的长度单位,以帮助各位创建灵活的Grid轨道。新的fr单元表示网格容器中可用空间的一小部分。 第二行的1fr会告诉区域占用剩余的可用空间。...如果将容器设置为100vh,就会占据整个页面的内容,列也是如此。...fr单位(加餐) 剩余空间分配数,用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

1.1K20
  • 【CSS动效实战(纯CSS与JS动效)】02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探

    ,灰和白;灰作为背景 ,白色用于div 背景,此时只需要创建两个样式,一个为背景色类样式,另一个 直接设置所有的 div 标签背景色为白色即可: .bgcolor { background-color...不过我们发现此时的样式还是有些奇怪,因为如果 div 是白色的话为什么只显示了头部的 div 背景色为白色,底部的 div 就像消失了一样,案例来说设置 flex 方向为竖轴后,那么下面的 div 应该会占满空间才是...--主要内容--> div style="flex:1">div> 此时页面刷新后你会发现空白一片,好像也不是很利于观察,这个时候你只需要给予每个 div 的margin...下创建一个 div: 当设备是手机访问时,屏幕大小将会改变,原有 PC 页面显示有问题,那么只需要使用 media 即可解决,此时我们先创建一个 空的类样式:.

    1.8K20

    【面试题解】什么是浮动?有什么应用?有什么影响?如何清除浮动?

    感觉有帮助的小伙伴请点赞鼓励一下~ 标准文档流 了解浮动之前,先来了解一下 标准文档流, 指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的 流式排列方式 。...请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘。 为什么会有浮动 因为当初设计 float 的目的是为了能实现文字能够环绕图片的排版功能。...> div class="box2">我是一个普通的元素,我是蓝色的div> div class="box3">我是浮动的元素,我是白色的div> div...原因是浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。...影响了叔叔元素 因为父元素的高度塌陷了,所以叔叔元素的布局也会受到影响。 如何清除浮动 父级元素也浮动 我们给浮动元素的父元素也设置个浮动。

    64610

    【CSS ——功能实现】电影院排座位(蓝桥杯真题-5133)【合集】

    body 样式: background-color: #242333;:设置页面的背景颜色为深灰色。 color: #fff;:设置页面文本颜色为白色。...height: 100vh;:设置 body 元素的高度为视口高度的 100%。 margin: 0;:去除 body 元素的默认外边距。...screen 样式: background-color: #fff;:设置屏幕的背景颜色为白色。 height: 70px;:设置屏幕的高度为 70px。...flex-wrap: wrap;:允许座位元素在一行排不下时换行。 gap: 10px;:设置座位元素之间的默认间隔为 10px。...为 seat-area 元素添加样式,设置与屏幕的间隔、使用 Flexbox 布局和元素之间的默认间隔。 选择特定列的座位,添加额外的右边距作为走廊。

    4600

    纯CSS画卡通蓝天白云草坪动画效果

    在Flex容器的主轴(默认为水平方向)上居中对齐其子元素。 为设置一个线性渐变背景。从顶部到底部,颜色从#add8e6(浅青色)渐变到#fff(白色)。...设置背景图像的大小为容器大小的200%。因为背景是一个渐变,所以这实际上为渐变动画提供了更多的空间。最后添加一个CSS动画。动画的持续时间为5秒,使用ease缓动函数,并且无限次地重复。...这些类名可以与基础 cloud 类一起使用,以提供额外的样式信息。 CSS样式 接下来,我们使用CSS来定义云朵的样式和动画效果。...先给整体布局设置一下 .cloudMain,.cloudMain-item { display: flex; } .cloud {...在这里,我们使用了白色 #fff。边框圆角 (border-radius): 通过设置边框圆角为50%,我们创建了一个圆形的云朵形状。

    19510

    转场动画一

    这里,要实现整个动画,有一个非常重要的场景,就是能够利用 LOGO 元素,切割背景,只看到 LOGO 背后的元素,像是得到一张这样的图片: 注意,图片的白色部分,不是白色,而是需要透明,能够透出背后的元素...我们来尝试一下: div>div> div { background: linear-gradient(-75deg, #715633, #2b2522); } 假设我们有这样一张背景:...基于单张图片的任意颜色转换 我们简单改造一下代码: div { background: linear-gradient(-75deg, #715633, #2b2522); mask:...背后的图层); } .g-wegame { position: absolute; width: 100vw; height: 100vh; background: linear-gradient...这里,核心在于这两张图片: 图片素材 1: 注意,这里最为核心的在于,图片中的白色不是白色,是透明的,可以透出背景的内容。 这样,我们只需要在这张图片的背后,放置另外这样一张图片: 想到了吗?

    62110

    WordPress 主题教程 #11:宽度和布局

    宽度和布局是从零开始创建 WordPress 主题系列教程的第十一篇,这篇将介绍如何设置每个 DIV 的宽度和布局排版,并且也会展示如何让主题显示正确,并同时在 Firefox 和 IE 下兼容,显示一致...详细解释: margin: 0 auto 0 auto; 意思是(注意顺序):0上页边空白,自动右页面空白,0下页边空白和自动左页面空白。从现在开始,记得设置左右页边空白为自动将使得居中对齐。...浮到左边,宽度为240px,并且给它灰色的背景: .sidebar{ float: left; width: 240px; background: #eeeeee; } #ffffff 是白色而background...margin: 0 0 0 10px; 具体的意思是:上边空白为0,右边空白为0,底部空白为0,左边空白为10像素。当大小为0的时候,px 单位不是必需的。...第8步(额外的步骤):修正 IE 的双倍页边距 bug Internet Explorer 有个双倍页边距的 bug,这样在 IE 下,我们的页面距就是 20像素,20像素的页边距可能会破坏布局并把侧边栏挤到页面的底部

    1.3K20

    ipad上100vh和100%踩坑记「建议收藏」

    最近遇到了一个小bug,在ipad上编辑word文件的虚拟键盘收回时,会导致页面的导航条隐藏,且页面的下面会出现一块空白 自己尝试的解决方案 通过focusin和focusout对虚拟键盘的弹入弹出进行监听...`` `#container {` `display: flex;` `width: 100vh;` `height: 100vw;` `}` `#child {` `...,100vh其实是比视口大,即100vh包含了下面的状态栏的高度。...我们看一下W3C的文档怎么说 即,flex容器中的绝对定位子元素会脱离flex布局流,也就是说flex: 1对子元素来说已经失效了。...因此他的高度为绝对定位中的100%设置的高度,但是又设置了overflow:hidden,因此才会在虚拟键盘隐藏时出现一部分空白,从而导致了导航条的隐藏。

    1.3K10

    前端入门5-CSS弹性布局flex声明正文-弹性布局flex

    当设置了 wrap 时,允许 items 在主轴方向溢出时自动进行换行布局,这点可以很好的用来实现响应式布局,比如当空间逐渐缩小时,原本水平排列的控件换成垂直方向排版。 示例: ?...当 flex 容器空间不够,item 要溢出时,设置次属性可控制 item 按比例进行相应收缩,以便不让 item 溢出,默认 1,值越大收缩倍数越大,最后 item 就越小,0 表示不收缩,负值无效。...auto:元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器。...这相当于将属性设置为 flex: 1 1 auto. initial:属性默认值, 元素会根据自身宽高设置尺寸。它会缩短自身以适应容器,但不会伸长并吸收flex容器中的额外自由空间来适应容器 。...场景3 场景4: 水平排列的一组 item 中,前几个左对齐,后几个右对齐。 这个需要结合块级元素的 margin 属性使用,当设置 margin: auto 时表示,将尽可能占据足够多的空间。

    1.2K20

    【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList

    "100vh"。...; } .container是整个应用的最外层容器,它被定位在屏幕的中心,并且具有一个白色的背景和10像素的圆角边框。...输入框的样式包括宽度、高度、字体、边框、内边距、字体颜色和字体粗细。当输入框被聚焦时,边框颜色会改变。提交按钮的样式包括宽度、高度、字体、字体颜色、背景颜色、边框、圆角和光标样式。...: 100%; position: relative; } .task是每个待办事项的样式,用于设置其背景颜色、高度、下外边距、内边距、显示属性、对齐方式、边框半径、边框样式和光标类型。...> `; 最后将删除按钮的点击事件绑定到一个匿名函数上,当点击删除按钮时,它将删除任务列表中的相应任务。

    1.4K50

    CSS | 视差滚动 | 笔记

    scroll 背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。 对父元素 css_demo 设置 overflow: scroll, 当元素内容超出页面时滚动。...当perspective属性用在容器内每个元素身上时,会根据各自的设置值进行表现。 打个比方就是你一个人平视盒子里的10个鸡蛋和十个你每人看1个一模一样鸡蛋。...它定义了 观察者(即浏览器窗口)与 3D 元素之间的距离,从而影响到元素的透视效果。 透视效果是指当元素在 3D 空间中移动时,根据其与观察者的距离,产生的远近感和大小变化。...结果是,当地址栏可见时,屏幕的底部部分将被切断,从而破坏了100vh的初衷。 如下所示: 当地址栏可见时,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...当页面加载时,将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分。 如果地址栏是可见的,那么 window.innerHeight 是全屏的高度。

    82021

    使用网络构建复杂布局超实用的技巧,赶紧收藏吧!

    使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。在这篇文章中,将会介绍所有我们需要了解的 CSS 网格知识 ?。...由于我们在第3列和第4列中应用了auto,因此剩余的屏幕长度将在其中分成两半。 ? 可以看到现在页面中有一个空白。 如果我想将第六列移至第三列和第四列怎么办?...我们可以根据需要设置移动端的视图,接下我们使用媒体查询来适配一下大屏幕: @media (min-width: 500px) { .container { grid-template-areas...假设我们有两列,它们均匀地占据了屏幕上的可用空间。...然而,第二列的最小值可以是100px,对于更大的屏幕,它将覆盖屏幕的其余部分。 如何使用 repeat 函数? 我们讨论一下元素中的重复模式。我们如何处理它们?

    1.1K31

    使用 CSS Grid 构建复杂布局超实用的技巧!

    网格布局是现代CSS中最强大的功能之一。使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。在这篇文章中,将会介绍所有我们需要了解的 CSS 网格知识 ?。...由于我们在第3列和第4列中应用了auto,因此剩余的屏幕长度将在其中分成两半。 可以看到现在页面中有一个空白。 如果我想将第六列移至第三列和第四列怎么办?...,接下我们使用媒体查询来适配一下大屏幕: @media (min-width: 500px) { .container { grid-template-areas: "header...假设我们有两列,它们均匀地占据了屏幕上的可用空间。...然而,第二列的最小值可以是100px,对于更大的屏幕,它将覆盖屏幕的其余部分。 如何使用 repeat 函数? 我们讨论一下元素中的重复模式。我们如何处理它们?

    1.9K10

    【面试题解】你能用多少种方式实现两栏布局,三栏布局,圣杯布局,双飞翼布局??

    感觉有帮助的小伙伴请点赞鼓励一下~ 两栏布局 左侧宽度固定。 右侧自适应。 浮动法 左栏做浮动。 右栏添加 margin-left 。...200px 和 150px,中间部分设置 100% 撑满; 把 container 中的三列设为浮动 float: left; 设置 container 部分的内边距,让其居中显示,padding:...和 right 的前面; 先定义好 header 和 footer 的样式,使之横向撑满; 给 container 设置相对定位,让子元素根据他进行定位; 设置 container 部分的内边距,让其居中显示...的样式,使之横向撑满; 三列的左右两列分别定宽 200px 和 150px,中间部分设置 100% 撑满; 把 container 中的三列设为浮动 float: left; 设置 middle-wrap...div> 其它知识点 圣杯布局由于设置了相对定位,所以当 left 原来的位置和 right 的位置产生重叠时,由于浮动的原因一行放不下就会换行,当页面小于最小宽度时布局就会乱掉

    42830

    弹指间,重温几个设置满屏的小技巧

    当然,从界面上来看,它这个效果图只是因为父容器未达到满屏导致底下留空白区域。 现在脑海过一下你能想到哪几个? 记不起来没关系,花2分钟时间简单过一下。...postion定位法 看到小标题应该知道我要say什么了吧 div class="container">div> .container{...html,body{ height:100%; } 所以设置的时候别忘记把“老子”带上。讲到讲到CSS属性继承了,扩展温习下: CSS哪些属性可以被继承?哪些不能够被继承?...这里扩展了解下vh在移动端设备上的部分“特性” 我们依然设置body 100vh的情况下,分别打开微信内置浏览器、Safari浏览器、Google浏览器 从效果图不难看出,在Safari浏览器、Google...滚动时可见区域会动态变化,如果我们相应地更新CSS视口高度,则需要在滚动过程中更新布局。为了达到更好的用户体验,使用较大的视图尺寸是最好的折衷方案。

    1.2K20

    滚动视差让你不相信“眼见为实”

    当我们看着繁星点点的天空时,较远的恒星运动较慢,而较近的恒星运动较快。当我们坐在车里看着窗外时,我们会有相同的感觉。远处的山脉似乎没有动,附近的稻田很快过去了。许多游戏使用视差效果来增加场景的三维度。...说的简单点就是,滚动屏幕时,网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同,导致网页中产生分层元素的错觉。 看完上面这段,相信你对视差滚动的概念已经有了一个初步的了解。...3d 变换时,perspective 可以定义我们眼睛看到的 3d 立体效果,即空间感。...当然,你可以直接去这里查看:https://codepen.io/jack-cool/pen/zYxzOpb 这里解释下使用transform: translate3d来实现视差滚动的原理: 1、给容器设置上...transform-style: preserve-3d和perspective: xpx,那么处于这个容器下的子元素就会处于 3D 空间中; 2、给子元素分别设置不同的transform: translateZ

    2.2K76
    领券