6

How can I hide a DIV (HEADER) if the DIV is empty? here is my HTML and Style, have tried. HEADER:empty, but when I run the code, the DIV is still there.

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

Hope someone can guide me, in the right direction. As you can see the HEADER DIV is empty - but is still showed with the green background color.

UPDATE As some of you write, then I can add this and it works..

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

but I then get a white area over the TOP div and thats not what i'm looking for. If the HEADER is empty, then hide the div and get the TOP div to the top.

I have then tried to use this for the TOP class-style.

position: fixed;

But the I get a white area between the TOP and MIDDLE div, can someone help me ?

2
  • use display:none; or visibility:hidden;
    – godfather
    Mar 22, 2019 at 9:25
  • how do you add the content of the header - the answer would depend on that :)
    – kukkuz
    Mar 22, 2019 at 10:18

4 Answers 4

9

No JS needed - just change display property's value in this CSS declaration block:

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

Look at this fiddle: https://jsfiddle.net/j8avxm1k/

If you type or put anything in the div.HEADER it will be visible again

EDIT

Personally I prefer good old fashioned "float" property instead of using this "reinventing the wheel" kind of methods, nevertheless in order to answer your question in the comment:

Reset the grid-template-rows property and set the .HEADER height in it's declaration to desired size, like so:

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

.HEADER { 
/* ... */
height: 100px;
/* ... */
}
4
  • 2
    empty is not blank - see what happens if there is a whitespace but essentially empty jsfiddle.net/2x53euwL
    – kukkuz
    Mar 22, 2019 at 10:11
  • 2
    div:empty matches <div></div> but not <div> </div> (note the whitespace)...
    – kukkuz
    Mar 22, 2019 at 10:16
  • Hi AZ, can see you get the same as me, the div is not displayed... but there is then added a white area at the top, so the TOP div is not at the "TOP"-page. Can I do something so if HEADER div is empty, then the TOP div, will be at the top.
    – Thomas BP
    Mar 22, 2019 at 17:29
  • by empty I mean empty. If a div contains a string with a whitespace - it's not essentially empty (sandbox.onlinephpfunctions.com/code/…)
    – Bart Az.
    Mar 23, 2019 at 0:31
6

The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.

div:empty {
  display: none;
}

For more details please refer https://css-tricks.com/almanac/selectors/e/empty/ This may help you.

3

You can use javascript to achieve that... look at the example below. If you write somehting in the div it appears. If you have it empty, it disappears.

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>

1

You can use jQuery to hide empty DIV. Suppose you have these DIVs.

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

Simple use jQuery as:

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

In your case

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

All empty DIVs will hide if these are empty.

For more details of jQuery :empty selector

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.