设置了height: 100vh,但页面还是有白色的边框
时间: 2023-05-27 11:05:53 浏览: 66
这可能是由于浏览器的默认样式所导致的。尝试使用以下CSS代码,将所有的margin和padding都设为0,来消除白色的边框:
```
html, body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
```
如果问题仍然存在,可以尝试在浏览器开发工具中查看页面元素的盒模型,确保没有其他元素影响了页面的高度。
相关问题
使用的是vue,设置了height: 100vh,但页面还是有白色的边框
可能是因为页面的body元素或其他容器元素设置了margin或padding的缘故。可以尝试在CSS中添加以下样式:
```
body, html {
margin: 0;
padding: 0;
}
```
如果还是存在白色边框,可以用浏览器的开发者工具检查元素的样式,找到造成白色边框的元素并进行相应的调整。
height: 100vh; box-sizing: border-box;
这是一段 CSS 代码,其中包含两个属性:
1. `height: 100vh;`:这个属性用于设置元素的高度。`vh` 是视口高度(viewport height)的单位,表示相对于视口高度的百分比。`100vh` 意味着元素的高度将占据整个视口的高度。
2. `box-sizing: border-box;`:这个属性用于定义元素的盒模型。`border-box` 值表示元素的宽度和高度将包括元素的边框和内边距,而不会受到外边距的影响。
总结起来,这段代码的作用是将元素的高度设置为整个视口的高度,并且定义元素的盒模型为包含边框和内边距。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)