高度为100%与100vh的区别
时间: 2023-08-31 10:07:30 浏览: 50
高度为100%和100vh都是用来设置元素的高度的单位,但它们有一些区别。
- 高度为100%:当将元素的高度设置为100%时,它会相对于其父元素的高度进行计算。也就是说,元素的高度将会是其父元素高度的百分比。如果父元素没有显式地设置高度,则元素的高度为0。
- 100vh:vh是视窗高度的单位,它表示相对于整个浏览器窗口可视区域的高度。因此,当将元素的高度设置为100vh时,它将占据整个可视区域的高度。不受父元素的高度影响。
总结来说,高度为100%是相对于父元素的高度进行计算,而100vh是相对于整个浏览器窗口可视区域的高度进行计算。
相关问题
css 100%和100vh
CSS中的100%和100vh都是用来设置元素高度的属性。其中,100%是相对于父元素的高度来设置元素的高度,而100vh则是相对于视口的高度来设置元素的高度。当父元素的高度固定时,子元素设置height:100%可以让子元素的高度等于父元素的高度。而当元素没有内容时,设置height:100%会让该元素的高度为0,而设置height:100vh则会让该元素的高度等于视口的高度。需要注意的是,当使用100%设置元素高度时,父元素的高度必须是固定的,否则无法生效。
Bootstrap 高度100%
在Bootstrap中,可以使用一些类来实现高度100%的效果。具体方法如下:
1. 如果需要让某个元素的高度占据整个屏幕的高度,可以使用`vh-100`类。例如:
```
<div class="vh-100">
这个元素将占据整个屏幕的高度。
</div>
```
2. 如果需要让某个元素的高度占据父元素的全部高度,可以使用`h-100`类。例如:
```
<div style="height: 500px;">
<div class="h-100">
这个元素将占据父元素的全部高度。
</div>
</div>
```
3. 如果需要让某个元素的高度占据浏览器窗口的高度(不包括导航栏),可以使用`vh-100`和`d-flex`类。例如:
```
<div class="vh-100 d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 导航栏内容 -->
</nav>
<div class="flex-grow-1">
这个元素将占据剩余的窗口高度。
</div>
</div>
```
在上面的代码中,`vh-100`类表示占据整个窗口高度,`d-flex flex-column`类表示开启Flexbox布局并垂直排列子元素,`flex-grow-1`类表示让子元素自动填充剩余高度。需要注意的是,为了避免内容被导航栏遮挡,可以将导航栏放在父元素的第一项,并使用`flex-grow-1`类让子元素自动填充剩余高度。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)