Why isn't the main body of CSS extending across the entire page?

Question

Why isn't the main body of CSS extending across the entire page?

I feel like I'm running headfirst into a wall trying to figure out why the code I wrote for this specific website isn't quite working properly.

The main content area of my pages (the white space in the link below) is supposed to extend from the navigation menu to the footer, but it only does so on certain pages.

The footer should automatically appear at the bottom of every page, regardless of its height (meaning it will always be at the bottom of a 400px tall page).

Could it be that I'm overlooking something very basic?

You can view the development version of the site at the following link:

www.contendertest.com

The pages causing me trouble are the index and 'enroll' pages.

html css spacing

Answer 1

Answer №1

The reason why the content does not fully fill the viewing area is due to limited content available for display, especially on larger screens. If you observe closely on a bigger monitor, you'll notice that the white space doesn't extend all the way down to the footer.

UPDATE: To resolve this issue, simply include the line padding-bottom:100px in #bodyContainer and margin-top:-100px in #footer, and everything will be properly aligned.

Answer 2

The reason why the content does not fully fill the viewing area is due to limited content available for display, especially on larger screens. If you observe closely on a bigger monitor, you'll notice that the white space doesn't extend all the way down to the footer.

UPDATE: To resolve this issue, simply include the line padding-bottom:100px in #bodyContainer and margin-top:-100px in #footer, and everything will be properly aligned.

Answer 3

Answer №2

Add a background image to your #container div that matches the width and color of the main content section, using the repeat-y property.

Update: Don't forget to center the background image as well!

Answer 4

Add a background image to your #container div that matches the width and color of the main content section, using the repeat-y property.

Update: Don't forget to center the background image as well!

Answer 5

Answer №3

Give this a try. Make sure not to use inline CSS like the example below.

<html>
<head>
    <title>DIV Test</title>
    <style>
        body {
            margin: 0;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #header {
            background: #0000FF;
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
        }

        #content {
            background: #FF0000;
            height: auto;
            width: 100%;
        }

        #footer {
            background: #00FF00;
            position: absolute;
            bottom: 0;
            height: 100px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"><!-- header content here --></div>
        <div id="content"><!-- main content here --></div>
        <div id="footer"><!-- footer content here --></div>
    </div>
</body>

Hopefully, this solution works for you.

UPDATE: Pay attention to the positioning attributes in the header and footer CSS. This should address the issue.

Answer 6

Give this a try. Make sure not to use inline CSS like the example below.

<html>
<head>
    <title>DIV Test</title>
    <style>
        body {
            margin: 0;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #header {
            background: #0000FF;
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
        }

        #content {
            background: #FF0000;
            height: auto;
            width: 100%;
        }

        #footer {
            background: #00FF00;
            position: absolute;
            bottom: 0;
            height: 100px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"><!-- header content here --></div>
        <div id="content"><!-- main content here --></div>
        <div id="footer"><!-- footer content here --></div>
    </div>
</body>

Hopefully, this solution works for you.

UPDATE: Pay attention to the positioning attributes in the header and footer CSS. This should address the issue.

Answer 7

Answer №4

In the file style.css, at line 16, please remove the height:100% property.

Here is how the code looks now:

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  height:100%;
  margin:0;
  padding:0;
  text-align:justify;
}

This is how the code should look after removing the height:100% property:

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  margin:0;
  padding:0;
  text-align:justify;
}

Answer 8

In the file style.css, at line 16, please remove the height:100% property.

Here is how the code looks now:

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  height:100%;
  margin:0;
  padding:0;
  text-align:justify;
}

This is how the code should look after removing the height:100% property:

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  margin:0;
  padding:0;
  text-align:justify;
}

Why isn't the main body of CSS extending across the entire page?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The two <p> elements are being pushed to the right column, which is not their intended display

Menu changes when hovering

Bootstrap Table with Numerous Rows and Columns

`Make adjustments to the visual representation of crispy forms`

The image is taking up the entire div instead of just filling the area below the header

Tips for concealing labels until the submit button is activated

Managing a new browser window using Selenium

Access the JavaScript variable in a webview and store it in an Android variable

Adjust the size at the location of the cursor

Is it possible to retrieve JSON data and display only the entries with positive values in an HTML

Conceal/reveal specific sections of a table cell using jQuery

Is there a way to modify the background of a div when a specific field within my component is true and the div is being hovered over?

All you need to know about the properties of CSS ul

Guidance on incorporating static files with Spring MVC and Thymeleaf

Ways to Conceal <div> Tag

Creating a Dynamic Navigation Bar using React and NextJS

After the submit button is disabled, the form fails to be submitted

What is causing setTimeout to not function as intended?

SASS : Loop not producing the most efficient CSS output

The Bootstrap 4 navbar remains consistently visible on mobile devices