html - 删除网格,如果网格元素为空?
问题描述
我在网格容器内为“侧边栏”和“主要内容”设置了网格。如果使用 css 为空,我想删除“侧边栏”元素。
.grid-container {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: 'sidebar main-content';
min-height: calc(100vh - 56px);
}
.sidebar {
grid-area: sidebar;
width: 100%;
height: 100%;
}
.main-content {
grid-area: main-content;
}
.grid-container > .sidebar:empty {
background-color: red;
}
如果它是空的,我可以选择“侧边栏”。无法选择父 div。
编辑:
html:
<div className='grid-container'>
<div className='sidebar'>
<Sidebar />
</div>
<div className='main-content'>
<div>Test</div>
</div>
</div>
Eidt 2:这对我有用。
.grid-container {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: 'sidebar main-content';
min-height: calc(100vh - 56px);
}
.sidebar {
grid-area: sidebar;
width: 250px;
height: 100%;
}
.main-content {
grid-area: main-content;
}
.sidebar:empty {
width: 0;
}
解决方案
推荐阅读
- javascript - 查找空的选择框
- python - python中的Np随机抽样
- visual-studio-code - 在 Visual Studio Code 中增加散景图的单元格大小
- angular - 在 Angular 上模块化业务逻辑的最佳方法是什么?
- javascript - 使用 javascript 下载 mp4 文件
- vba - 在 moduleB 中调用全局/公共变量,其值在 moduleA 中定义
- java - 覆盖到文件它会删除所有内容
- c - 数组返回指针问题
- git - 在 Heroku CI dyno 上获取 git 日志历史记录
- jquery - 在荒野中追踪流氓 jQuery