我有一个带有主区域的仪表板和一个带有活动提要的侧栏.有时"活动"多于主要内容.有没有一种纯css的方法来确保活动提要的高度被限制到主区域的高度?让这件事变得复杂的一件事是,主要区域没有固定的高度.

以下是对这个问题的一个嘲弄:

dashboard with main and aside

这感觉...就差那么一点...但它并没有到达那里.开始怀疑没有JS是不可能的吗?

https://play.tailwindcss.com/O3pKf1ub82

推荐答案

将侧边栏转换为absolute元素,并将其设置为relative元素的父元素.

这使得它依赖于它的母公司.随着主内容的增长,父内容和侧边栏也会与父内容的高度匹配.

别忘了为主要内容设置一个最小高度,例如min-h-[10rem],以避免侧边栏太小.

演示链接:https://play.tailwindcss.com/lyeySM51kQ

Css相关问答推荐

如何在Elm中更改视图时添加过渡?

Vue3日期 Select 器:禁用向左和向右箭头

为什么继承时1rem值不同?

圆形按钮边框长度动画

使用 Flex 容器,如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度?

Tailwind CSS 不输出背景类

我可以拆分我的 CSS / SASS webpack 加载器规则,还是它们需要成为一个大规则?

2 列 UL,右列中的列表项数量为奇数?

如何为 React Native switch 组件创建标签?

tailwind 类的别名?

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

使用border-radius时填充元素之间的空间

如何将数据从样式化组件发送到函数?

删除 IE10 Select 元素箭头

如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

如何在不使用浮动的情况下垂直对齐 div?

css3 nth 类型限制为类

带有 flexbox 的 css 正方形网格

flex-wrap 如何与 align-self、align-items 和 align-content 一起使用?

弹性框中的边距折叠