How can I make content 100% of screen

Question

I am trying to make my footer sit at the bottom of the page.

This is my code:

<html>
    <head>
    <title>Freds Cars, Trucks & Jeeps</title>
    <style>
        #container{
           height: auto;
           width: 100%;
        }
    </style>
</head>
<body style="margin: 0px;>
    <div id="container">
        <header style="background-color:black;
                color: white;
                text-align:center">
            Fred's Cars, Trucks & Jeeps
        </header>

        <h1>Welcome to Freds Cars!</h1>

        Thank you for visiting our site!

        <footer style="background-color:black;
                color: white;
                text-align:center">
           121 Fredway St.
           Cartown USA
        </footer>
    </div>
</body>
</html>

But this is what my webpage looks like:

I thought the container id style would make the container div 100%. This gets me every time. What is the simple way to do this?

UPDATE

This is what I did to fix

<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
<style>
   body{
      margin: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
   }

   header{
      height: 5vh;
      padding-top:5;
      background-color:black;
      color: white;
      text-align:center;
      font-size: 16pt;
      font-weight: bold;
      font-family: arial;
   }

   .spacer {
       flex: 1;
   }
</style>
</head>
<body>

<header>
    Fred's Cars, Trucks & Jeeps
</header>

<h1>Welcome to Freds Cars!</h1>

Thank you for visiting our site!

<div class="spacer"></div>
<footer style="background-color:black;
            color: white;
            text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>

</body>
</html>

Now it looks correct like this:

Deotyma · Answer 1 · 2021-10-21T15:06:08.940

0

You can use vh (view height) for your body in your css file.

Visit W3 School

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Freds Cars, Trucks & Jeeps</title>
    <style>
        #container {
            height: 100vh;
            width: 100%;
        }

        header,
        footer {
            height: 10vh;
        }

        main {
            height: 80vh;
        }
    </style>
</head>

<body style="margin: 0px">
    <div id="container">
        <header style="background-color:black;
                    color: white;
                    text-align:center">
            Fred's Cars, Trucks & Jeeps
        </header>
        <main>

            <h1>Welcome to Freds Cars!</h1>

            Thank you for visiting our site!
        </main>

        <footer style="background-color:black;
                    color: white;
                    text-align:center">
            121 Fredway St.
            Cartown USA
        </footer>
    </div>

</body>

</html>

edited Oct 21 '21 at 15:06

answered Oct 21 '21 at 14:37

Deotyma

677
2
8
25

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Harshal Patil Oct 21 '21 at 14:44
@Deotyma - Thanks. But when I past this code exactly into my editor I get a little vertical scroll at the bottom. I can't figure out why. – Sam Oct 21 '21 at 20:27
@Deotyma - Also it doesn't seem to matter if I remove the #container style, since we set the height for header, footer, and main. – Sam Oct 21 '21 at 20:33
You can use [normamize.css] https://necolas.github.io/normalize.css/ with your file to normalise all your css code and with your file css you can add this code: `*{ box-sizing: border-box;} ` so when you use anothers parameters like margin or borders etc. all is inside your box. Generaly is better to add your css to your file with special css file and not to write this css in html file. It is easier to edit it after. – Deotyma Oct 22 '21 at 09:29

How can I make content 100% of screen

1 Answers1