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

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 >
                    dasdfaf
                </section>
                <section >
                    fgasfgasf
                </section>
            </main>
            <footer>
    
            </footer>
        </body>
    </html>

CodePudding user response：

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 >

  </section>
  <section >

  </section>
</main>
<footer>

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