css完成高度的自适应

class Demo extends React.Component {
state = {
list: []
}
handleAdd = () => {
const { list } = this.state;
this.setState({ list: [...list, list.length] })
}
render() {
const { list } = this.state
return (
<div className={styles.container}>
<div className={styles.top}>
<Button type="primary" onClick={this.handleAdd}>增加</Button>
</div>
<div className={styles.middle}>
{
list.map(item => <p className={styles.item}>{item}</p>)
}
</div>
<div className={styles.bottom} />
</div>
);
}
}

.container {
display: flex;
flex-direction: column;
.top {
width: 100px;
height: 100px;
background: lightcoral;
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
width: 100px;
height: 100px;
background: lightblue;
}
.middle {
flex: 1;
}
.item {
width: 80px;
height: 40px;
margin: 5px;
background: lightgreen;
}
}

css完成高度的自适应

  • 中间绿色的部分，不足高度时，就是自己的高度。

  • 中间绿色部分超出高度时，有最大高度，可滚动。

  • 绿色的最大高度时浏览器的高度减去顶部和底部，不同浏览器可能不同。

  • 不希望通过js获取元素高度，css能否搞定？

回答

中间做个绝对定位后，溢出滚动就行

  • 中间绿色的部分，不足高度时，就是自己的高度。

此时高度计算依据子元素

  • 中间绿色部分超出高度时，有最大高度，可滚动。

此时高度计算依据父元素

如果container容器高度计算依据父元素，且顶部和底部的高度是固定的，则还可以尝试利用max-height: 100% + flex: 1 1 auto试试。
但是

绿色的最大高度时浏览器的高度减去顶部和底部，不同浏览器可能不同

囧~~

container加一个最大高度高度 max-height: 100vh
middle加一个滚动 overflow: auto

以上是 css完成高度的自适应 的全部内容， 来源链接： utcz.com/a/59952.html

回到顶部