CSS 如何从底部向上增加高度
发布于2024-12-12 18:09 阅读(807) 评论(0) 点赞(10) 收藏(3)
我尝试在单击时更改 div 的 CSS。
这很容易实现（我正在使用样式化组件）：
height: ${props => (props.isOpen ? '100px' : '')};
但是，这总是从上向下改变框，即当我单击它时，div 的顶线保持静态，而底线向下移动，从而达到新的高度。
我想实现与此相反的效果：顶线向上移动，而 div 的底部保持不变
在 CSS 中如何实现这一点？
解决方案
您可以包装要折叠的元素并增加父级的高度，同时设置margin-top元素本身的负数。
像这样：
document.querySelector('button').addEventListener('click', () => {
document.querySelector('.outer').classList.toggle('collapsed');
});.outer {
position: relative;
overflow: hidden;
max-height: 500px;
transition: all 5s ease;
}
.outer.collapsed {
max-height: 0;
}
.inner {
background: red;
transition: all 5s ease;
}
.outer.collapsed .inner {
margin-top: -100%;
}<div class="outer">
<div class="inner">
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text final<br />
</div>
</div>
<button>Toggle</button>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/538563/e6ecac82363c00e0f8a0/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力