Html Question posted in
Some basic documentation can be found here.

Is there a way to use css to style html elements to display full width across the page without putting text content into the elements?

I am wanting to display a page with no content that just visually displays the basic structure of a html page using semantic tags without actually putting in any text content (yet).

The effect I’m looking for is a page that looks like this:

bands of colour across the web page

Here is the html that I have written so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
            width: 500px;
            margin: 0 auto;
        }
        
        header {
            background-color: green;
            width: 100%;
        }
        
        nav {
            background-color: aqua;
            width: 100%;
        }
        
        main {
            background-color: lightblue;
            width: 100%;
        }
        
        footer {
            background-color: bisque;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>

My problem is that it doesn’t display anything at all, until I put some kind of text into each of the semantic tags (even if it’s a &nbsp; ).

Is there a way to style the tags, such that they will show the full box for each of the semantic elements , , and across the width of the page without having to add some text into each of them?

Thanks heaps 🙂

Tags:

2

Answers


  1. 0

    The problem here is that the elements have a height of 0 pixels. This is also the reason why they are visible once you add text to them.

    You can set the height of a normal line of text for the elements like this:

        header {
        background-color: green;
        width: 100%;
        height: 1em;
    }

    Of course you can also set an absolute height using px or vh.

    See a Codepen with multiple examples: https://codepen.io/konlanx/pen/LYwjxNN

    You can also use your browsers developer tools by right-clicking your page and choosing "Inspect element". In this view you can highlight an element and investigate its properties in the "Layout" tab. Here you can see that your elements are being rendered, but have a height of 0 pixels.

    Login or Signup to reply.
  2. 0

    you need to set height to each of the sections you can use fixed or percentage

       #wrapper {
            width: 500px;
            margin: 0 auto;
        }
        
        header, nav, main, footer {
            width: 100%;
        }
        
        header {
            background-color: green;
            height: 100px; /* set */
        }
        
        nav {
            background-color: aqua;
            height: 50px; /* set */
        }
        
        main {
            background-color: lightblue;
            height: 300px; /* set */
        }
        
        footer {
            background-color: bisque;
            height: 100px; /* set */
        }
      <div id="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <main>
        </main>
        <footer>
        </footer>
    </div>

    the following is for percentage, we set the parent height for 100% and then each section

    html, body {
            height: 100%; 
            margin: 0; 
        }

        #wrapper {
            width: 500px;
            margin: 0 auto;
            height: 100%;
        }
        
        header, nav, main, footer {
            width: 100%;
        }
        
        header {
            background-color: green;
            height: 10%; /* 10% of the parent */
        }
        
        nav {
            background-color: aqua;
            height: 10%; /* 10% of the parent */
        }
        
        main {
            background-color: lightblue;
            height: 60%; /* 60% of the parent */
        }
        
        footer {
            background-color: bisque;
            height: 20%; /* 20% of the parent */
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search