Size of a section with CSS. Does it needs content within to be displayed on the browser?

Question

how are you? First of all, I'm a very beginner and yes... I've done my research about this without success. Let me explain myself better with two images:

How I see others have it

How it shows to me

In my case, the section with its properties only displays if I add any content within, even a short random text or whatever within that section or Div, but other people doesn't need to add anything inside of these blocks. They would show just by adding them properties such as the Width or the Height (these are also added in both of my examples).

I can't say I've tried to do much more than that because I couldn't find any information about the exact same problem. Of course I've checked the code and everything seems normal according to my knowledge till' now.

I will show you my code in case you want to verify it. Thanks in advance!

*{
    margin: 0;            /*universal setting for no body margins*/
    padding: 0;
}

header{
    width: 100%;            /*Occupy the entire width of the page*/
    height: 50px;
    background-color: whitesmoke;
}

main{
    width: 100%;
    height: 90%;
    background-color: rgb(185, 255, 92);
    display: flex;
    justify-content: space-between;
}

section{
    width: 40%;
    height: 100%;
    background-color: rgb(125, 184, 251);
}

.sect1{
   width: 70%;
}

.sect2{
    width: 25%;
}

footer{
    width: 100%;
    height: 50px;
    background-color: rgb(255, 0, 0);
}

<!DOCTYPE html>
    
    <html lang="es">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="reset.css">
            <link rel="stylesheet" href="style.css">
            <title>Challenge Alura ONE #1 - Encriptador</title>
        </head>
        <body>
            <header>
                <img src="imgs/LogoOGLog.svg" alt="Small Allura's logo">
            </header>
            <main>
                <section class="sect1">
                    dasdfaf
                </section>
                <section class="sect2">
                    fgasfgasf
                </section>
            </main>
            <footer>
    
            </footer>
        </body>
    </html>

I think posting your codes in your question as ```code``` and ```not image``` is better for others to find out problems. Also try other unit for height. for example ```height:100vh;```. — hamid-davodi, Oct 23 '22 at 03:04
90% and so on is a percentage of what? Does the parent have any height set (including body) — A Haworth, Oct 23 '22 at 04:00
Hi. The percentages are the height and the width of each section I've set them for (header, main, etc). As long as I know percentages can be used for that and not just pixels. Okay, @Hamid-davodi, I will try with and research about that unit and also try to show the code parts instead of the images. Thanks for that advice. — Retablo Autómata, Oct 23 '22 at 11:57

score 0 · Accepted Answer · answered Oct 23 '22 at 13:43

Yes, percentages can be used for the height css property. But percentages units are relative units. That means when you say for example height: 100%; that element height is 100 percent of its parent. But we have some default values for css properties. The default value for height property is "auto". So if you want to use percentage unit for main tag or ..., you can change your styles like the below code:

*{
    margin: 0;            /*universal setting for no body margins*/
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

header{
    width: 100%;            /*Occupy the entire width of the page*/
    height: 50px;
    background-color: whitesmoke;
}

main{
    width: 100%;
    height: 90%;
    background-color: rgb(185, 255, 92);
    display: flex;
    justify-content: space-between;
}

section{
    width: 40%;
    height: 100%;
    background-color: rgb(125, 184, 251);
}

.sect1{
    width: 70%;
}

.sect2{
    width: 25%;
}

footer{
    width: 100%;
    height: 50px;
    background-color: rgb(255, 0, 0);
}

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Challenge Alura ONE #1 - Encriptador</title>
  <link rel="stylesheet" href="newStyle.css">
</head>
<body>
<header>
  <img src="imgs/LogoOGLog.svg" alt="Small Allura's logo">
</header>
<main>
  <section class="sect1">

  </section>
  <section class="sect2">

  </section>
</main>
<footer>

</footer>
</body>
</html>

Well... @hamid-davodi You're my savior. I'm actually improvising here since it says that I cannot waste my comment/answer thanking you, therefore I will invest it by asking one last definitive question: Is the "html" selector (that one before the Body selector) recommended to include it? I will set this question as solved as soon as I figure out how to do it. T$%nk you. — Retablo Autómata, Oct 23 '22 at 23:56
@RetabloAutómata I'm not sure what is your exact question, but maybe reading [this question](https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) and its answers could help you better understand the problem. — hamid-davodi, Oct 24 '22 at 02:54
Thank you very much. Yeah... That post explains it really good. My question basically was if I always have to use the "html, body { }" thing in order to avoid some issues with the display of elements. About everything else, I think I have everything under control now. — Retablo Autómata, Oct 25 '22 at 20:00
@RetabloAutómata According to my knowledge at least for using height with percentage unit, it is necessary to set height for both ```html``` and ```body```. But maybe for other styles it is not necessary. — hamid-davodi, Oct 26 '22 at 09:25

Size of a section with CSS. Does it needs content within to be displayed on the browser?

1 Answers1