隐藏 div，如果 div 为空答案

【问题标题】：Hide div, if the div is empty隐藏 div，如果 div 为空
【发布时间】：2019-03-29 16:55:20
【问题描述】：

如果 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 之间有一个白色区域，有人可以帮我吗？

【问题讨论】：

使用显示：无；或可见性：隐藏；
你如何添加 header 的内容 - 答案取决于:)

标签： html css

【解决方案1】：

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

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

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

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

编辑

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

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

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

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

【讨论】：

empty 不是 blank - 看看如果有 whitespace 但基本上是空的会发生什么jsfiddle.net/2x53euwL跨度>
div:empty 匹配 <div></div> 但不匹配 <div> </div>（注意空格）...
嗨 AZ，可以看到你和我一样，div 没有显示...但是在顶部添加了一个白色区域，所以 TOP div 不在“TOP “-页。如果 HEADER div 为空，我可以这样做吗，那么 TOP div 将位于顶部。
空的意思是空的。如果一个 div 包含一个带有空格的字符串 - 它本质上不是空的 (sandbox.onlinephpfunctions.com/code/…)

【解决方案2】：

您可以使用 javascript 来实现...请看下面的示例。如果你在 div 中写一些东西，它就会出现。如果你把它留空，它就会消失。

var x = document.getElementById("HEADER");

if(x.innerHTML === ""){
    x.style.display = "none";
}
else{
  x.style.display = "block";
}

<!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" id="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>

【讨论】：

【解决方案3】：

:empty 伪选择器将选择不包含任何内容或仅包含 HTML 注释的元素。

div:empty {
  display: none;
}

更多详情请参考https://css-tricks.com/almanac/selectors/e/empty/ 这可能会对您有所帮助。

【讨论】：

【解决方案4】：

您可以使用 jQuery 隐藏空的 DIV。假设您有这些 DIV。

<div class="item"></div>
<div class="item">some text</div>

简单使用 jQuery 为：

$('div.item:empty').hide();

你的情况

$('div.HEADER:empty').hide();

如果为空，所有空的 DIV 都将隐藏。

更多jQuery:empty选择器详情

【讨论】：