Question

如果DIV为空，如何隐藏DIV（标题）？这是我的HTML和样式，已经尝试过了。 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之间有一个白色区域，有人可以帮我吗？

Answer 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;
/* ... */
}

Answer 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>

Answer 3

您可以使用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选择器的更多详细信息

Answer 4

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

div:empty {
  display: none;
}

有关更多详细信息，请参阅https://css-tricks.com/almanac/selectors/e/empty/ 这可能会对您有所帮助。

如果div为空，则隐藏div

4 个答案: