0

I am using the percentage value of the height set to 100% so that the nav and article container, which are child container of the section tag, will occupy the entire height of the parent. However, that is not the case at the output. On the other hand, if I set the values in nav and article to the absolute pixel one, say 400px, then I get my output.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        /* Style the header */
        header {
            background-color: #666;
            padding: 1px;
            text-align: center;
            font-size: 35px;
            color: white;
        }

        /* Create two columns/boxes that floats next to each other */
        nav {
            float: left;
            width: 30%;
            height: 100%; /*works if absolute pixel values given*/
            background: #ccc;
            padding: 20px;
        }

            /* Style the list inside the menu */
            nav ul {
                list-style-type: none;
                padding: 0;
            }

        article {
            float: left;
            padding: 20px;
            width: 70%;
            background-color: #f1f1f1;
            height: 100%; /*works if absolute pixel values given*/
        }

        /* Style the footer */
        footer {
            background-color: #777;
            padding: 10px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>

    <header>
        <h2>Cities</h2>
    </header>

    <section>
        <nav>
            <ul>
                <li><a href="#">London</a></li>
                <li><a href="#">Paris</a></li>
                <li><a href="#">Tokyo</a></li>
            </ul>
        </nav>

        <article>
            <h1>London</h1>
            <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        </article>
    </section>

    <footer>
        <p>Footer</p>
    </footer>

</body>
</html>

What the difference does it make to use pixels instead of percentage value of the height property?

1 Answers1

0

Percentage values are based on the height of the parent (in this case section). Since you don't have anything set for the height of section, CSS doesn't know what you mean when you say 100%.

100% of what?

You can fix this by specifying a height for the section. This can be a finite value (like 400px) or a percentage, but this problem is recursive, so if you use a percentage value for the height of the section, its parent then needs a defined height. This can carry up the DOM chain all the way to the <html> element which uses the window height as its relative height for percentage values.

section
{
    height: 400px;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        
        section
        {
          height: 400px;
        }

        /* Style the header */
        header {
            background-color: #666;
            padding: 1px;
            text-align: center;
            font-size: 35px;
            color: white;
        }

        /* Create two columns/boxes that floats next to each other */
        nav {
            float: left;
            width: 30%;
            height: 100%; /*works if absolute pixel values given*/
            background: #ccc;
            padding: 20px;
        }

            /* Style the list inside the menu */
            nav ul {
                list-style-type: none;
                padding: 0;
            }

        article {
            float: left;
            padding: 20px;
            width: 70%;
            background-color: #f1f1f1;
            height: 100%; /*works if absolute pixel values given*/
        }

        /* Style the footer */
        footer {
            background-color: #777;
            padding: 10px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>

    <header>
        <h2>Cities</h2>
    </header>

    <section>
        <nav>
            <ul>
                <li><a href="#">London</a></li>
                <li><a href="#">Paris</a></li>
                <li><a href="#">Tokyo</a></li>
            </ul>
        </nav>

        <article>
            <h1>London</h1>
            <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        </article>
    </section>

    <footer>
        <p>Footer</p>
    </footer>

</body>
</html>
Liftoff
  • 24,717
  • 13
  • 66
  • 119