Menu
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 ?
920
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;
/* ... */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
