``` height ```position: fixed;后width和height无效
时间: 2024-05-09 21:13:46 浏览: 20
当一个元素的 position 属性设置为 fixed 或 absolute 时,它会脱离文档流并且不再占据空间。因此,fixed 元素的宽度和高度将会被忽略,而是由它的内容或者子元素的大小来决定。如果你想要固定宽度和高度,可以设置其父元素的 position 为 relative,并将 fixed 元素作为其子元素,然后为 fixed 元素设置 width 和 height。
相关问题
解释.topBanner { height: 68px; background: #F41014; position: fixed; width: 100%; left: 0; top: 0;
这是一个CSS样式定义,它定义了一个名为"topBanner"的元素的样式。具体解释如下:
1. height: 68px; 表示这个元素的高度为68像素。
2. background: #F41014; 表示这个元素的背景颜色为红色(#F41014)。
3. position: fixed; 表示这个元素的定位方式为固定定位,即不随页面滚动而移动。
4. width: 100%; 表示这个元素的宽度为100%,即与页面宽度相等。
5. left: 0; 表示这个元素距离页面左边框的距离为0。
6. top: 0; 表示这个元素距离页面顶部的距离为0。因此,这个样式定义了一个固定在页面顶部的红色横条,高度为68像素,宽度为100%。
.but { position: fixed; width: 100vw; height: calc(100vh - 50px); border: 8px solid black; }不对,参照,上面样式,修改宽度
如果您希望修改 `.but` 元素的宽度,可以根据您的需求对 `width` 属性进行调整。以下是修改宽度的示例:
```css
.but {
position: fixed;
width: 80vw; /* 设置宽度为视口宽度的 80% */
height: calc(100vh - 50px);
border: 8px solid black;
}
```
在上面的示例中,我将宽度设置为视口宽度的 80%,您可以根据需要调整百分比值来实现所需的宽度效果。请注意,这里使用的是视口单位 `vw`,表示相对于视口宽度的百分比。
根据您的具体需求,您可以尝试不同的宽度值,如 `70vw`、`90vw` 等,以达到您想要的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)