css 父级div overflow-y: scroll; height: 100%; 子级div height: 2rem; 但是父级高度还是填充不起来 怎么解决
时间: 2024-03-05 08:50:10 浏览: 28
如果子元素高度是固定的,可以尝试将父元素高度设置为固定值,如:
```
.parent {
height: 200px; /* 设置为固定值 */
overflow-y: scroll;
}
.child {
height: 2rem;
}
```
如果子元素高度是动态变化的,可以使用 flex 布局,将父元素设置为 flex 容器,子元素设置为 flex 项目,如:
```
.parent {
display: flex;
flex-direction: column;
overflow-y: scroll;
}
.child {
flex: 1;
}
```
这样可以让子元素自适应父元素高度,填充整个父元素。
相关问题
html, body { height: 100%; overflow-y: scroll; body { -webkit-overflow-scrolling: touch; overscroll-behavior: none; } }
这段代码的问题在于,您在`html`和`body`标签中设置了`overflow-y: scroll`,这会导致整个页面都可以滚动,而不是仅限于内容超出部分。
此外,您设置了`-webkit-overflow-scrolling: touch`,这是一个用于iOS设备的CSS属性,用于实现平滑滚动效果。但是,这个属性应该写在`body`标签中而不是在`body`标签内部的样式中。
最后,`overscroll-behavior: none`用于阻止iOS设备的弹性滚动效果,但是这个属性只在iOS 10及以上版本中生效,如果需要兼容之前的版本,可以考虑使用JavaScript代码实现。
因此,您可以尝试修改为以下代码:
```css
body {
height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
.content {
height: 100%;
overflow-y: scroll;
overscroll-behavior: none;
}
```
这样,您可以在`body`中隐藏滚动条,并使用`.content`来实现内容的滚动,并在其中使用`overscroll-behavior: none`来阻止iOS设备的弹性滚动效果。
css overflow-y: scroll 总有一部分超出
如果使用 `overflow-y: scroll`,在内容超出容器高度时,会出现滚动条以便用户滚动查看超出的部分。如果您遇到滚动条总是出现,即使内容没有超出容器的情况,那么可能是因为您的容器的实际高度没有被正确设置。您可以使用 `height` 属性来确保容器的高度正确设置,然后再使用 `overflow-y: scroll` 来启用滚动条。
另外,如果您想让滚动条始终显示,而不是仅在内容超出容器时才显示,可以使用 `overflow-y: scroll!important;` 和 `::-webkit-scrollbar { display: block; }`:
```
.container {
height: 200px;
overflow-y: scroll!important;
}
.container::-webkit-scrollbar {
display: block;
}
```
这样设置后,无论内容是否超出容器,滚动条都将始终显示。