时间戳

首页 > 解决方案 > 隐藏 div，如果 div 为空

html - 隐藏 div，如果 div 为空

问题描述

如果 DIV 为空，如何隐藏 DIV（标题）？这是我的HTML和Style，都试过了。HEADER:empty，但是当我运行代码时，DIV 仍然存在。

<!DOCTYPE html>
<html>
<head>
<style>
body { 
    width: 1080px;
    height: 1920px;
}

/* Start MAIN-grid-container */
.MAIN-grid-container {
    display: grid;
    grid-template-columns: 1080px;
    grid-template-rows: 100px 640px 300px 100px;
    grid-template-areas: "HEADER" "TOP" "MIDDLE" "FOOTER";
    margin: 0px 0px 0px 0px; /*top,right,bottom,left or auto for horizontal center*/
}

.MIDDLE { 
    grid-area: MIDDLE; 
    background-color:lightblue;
}

.FOOTER { 
    grid-area: FOOTER; 
    background-color:yellow;
}

.TOP { 
    grid-area: TOP; 
    background-color:red;
}

.HEADER { 
    grid-area: HEADER; 
    background-color:green;
}

.HEADER:empty { 
    grid-area: HEADER; 
    display: block;
}
/* End MAIN-grid-container */

</style>
</head>
<body>
<div class="MAIN-grid-container">
  <div class="HEADER"></div>
  <div class="TOP">
    <div class="SUB-TOP-grid-container">
      <div class="SUB-TOP-MAIN" id="WeatherContainer">
        <div class="SUB-TOP-MAIN-grid-container">
          <div class="SUB-TOP-MAIN-TIME">DATE AND TIME<br/><br/>hhfh</div>
          <div class="SUB-TOP-MAIN-CURRENT">CURRENT WEATHER</div>
        </div>
      </div>
      <div class="SUB-TOP-FORECAST">FORECAST test</div>
    </div>
  </div>
</div>
</body>
</html>

希望有人可以指导我，朝着正确的方向前进。如您所见，HEADER DIV 为空 - 但仍以绿色背景颜色显示。

更新正如你们中的一些人所写的那样，我可以添加它并且它可以工作..

.HEADER-empty, .HEADER:empty, [class^=HEADER-]:empty { 
    grid-area: HEADER; 
    display: none;
}

但然后我在 TOP div 上得到一个白色区域，这不是我想要的。如果 HEADER 为空，则隐藏 div 并将 TOP div 置于顶部。

然后我尝试将其用于 TOP 类样式。

position: fixed;

但是我在 TOP 和 MIDDLE div 之间有一个白色区域，有人可以帮我吗？

标签： htmlcss

解决方案

不需要 JS - 只需在这个 CSS 声明块中更改显示属性的值：

.HEADER:empty { 
    grid-area: HEADER; 
    display: none;
}

看看这个小提琴： https ://jsfiddle.net/j8avxm1k/

如果您在 div.HEADER 中键入或放入任何内容，它将再次可见

编辑

就个人而言，我更喜欢老式的“浮动”属性，而不是使用这种“重新发明轮子”的方法，但是为了在评论中回答你的问题：

重置 grid-template-rows 属性并将其声明中的 .HEADER 高度设置为所需的大小，如下所示：

.MAIN-grid-container {
/* ... */
grid-template-rows: auto 640px 300px 100px;
/* ... */
}

.HEADER { 
/* ... */
height: 100px;
/* ... */
}

推荐阅读