Why is my page content going under the footer?

Question

My HTML page has content going under the footer. Can someone help me make the page get longer so that you can scroll down to see the footer? or make it so that the footer begins where content ends(prefered)? Not sure what i did wrong.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>351 Project || Search Student Notes</title>
 <link rel="stylesheet" href="main.css">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
        <?php include "advisor_header.html" ?>
  <div>
  <h1>Student Notes For <?php echo $student_first_name . " " . $student_last_name;?> </h1>
        <div>
            <div>
                <textarea class="chunkybox" disabled="disabled" name="notes" rows="20" col = "15"><?php echo $student_notes;?></textarea>
            </div>
        </div>
  <h3><center>End of Notes</center></h3>
  <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
    <form name="activeadviseeform" class="centeredbutton">
        <div>
            <div>
                <textarea style="height: auto;" class="chunkybox" name="notes" rows="20" col = "15" placeholder="Type notes to ADD"></textarea>
            </div>
        </div>
    <button class="centeredbutton" type="submit">Add Notes</button>
</form>
<form action="advisor_edit_notes.php">
    <button class="centeredbutton" type="submit">Edit Notes</button> 
</form>
    <?php if($_SERVER["REQUEST_METHOD"] == "POST"){
        if ($student_notes == null) {
            $appendednotes =  $time . " " . $_POST['notes'];
        }
        if ($student_notes != null) {
        $appendednotes = $student_notes . "\r\n" . $time . " " . $_POST['notes'];
        }
        $update = "UPDATE people SET notes = '$appendednotes' WHERE id = '$student_id'";
    // update in database 
    $rs = mysqli_query($con, $update);

    if($rs)
    {
        header("Refresh:0");
        //printf("Notes Added to : %s Notes", $_SESSION["activeadvisee"]);
    }
    }
    ?>
    </div>
</div>
<?php include "footer.html" ?>
</body>
</html>

footer.html:

<footer class='footer'>
    Copyright &copy; 2022 <br>
    <a href="mailto:placeholder@temp.com">placeholder@temp.com</a> :: <a href="placeholder.html" title="Contact Form">Contact Form</a>
</footer>

main.css:

.footer {
    width: 100%;
    height: 150px;
    background: #3167b1;
    position: fixed;
    bottom: 0px; left: 0;
}

What are the two closing `` tags supposed to be closing? ... Does the footer need to be in a div like the header? Start with removing those closing div tags and see if anything changes. — Paul T., Jan 29 '22 at 04:25
Also, [this answer](https://stackoverflow.com/a/48342547/7644018) may be of interest. — Paul T., Jan 29 '22 at 04:32
the two closing tags were for an empty div, which i removed, and for the — ChristianWagner, Jan 29 '22 at 04:32
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Jan 29 '22 at 15:21

score 1 · Answer 1 · answered Jan 29 '22 at 05:31

Position fixed may not be what you want from what it sounds like? Fixed would keep it on the page at all times with the scroll. If you only want it to stay at the bottom I would think static is the position you would want - which is the default.

Is there something I'm misunderstanding?

https://www.w3schools.com/css/css_positioning.asp

position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Also, I agree with Paul T. above that using display:flex is a great alternative to solve this! — TareUhhhhhh, Jan 29 '22 at 05:34

score 1 · Answer 2 · answered Jan 29 '22 at 07:46

1

use any of the below

position: relative;
position: static;

.footer {
  width: 100%;
  height: 150px;
  background: #3167b1;
  position: relative;
  bottom: 0px;
  left: 0;
}

answered Jan 29 '22 at 07:46

Neptotech -vishnu

1,096
8
23

Hey, i used the .footer as-is that you provided, and now its much better, however, there is still a slight overlap. How would i fix the page not going down to allow me to see the button? Photo: https://i.imgur.com/VLylh72.png – ChristianWagner Jan 29 '22 at 08:47

score 0 · Answer 3 · edited Jan 29 '22 at 09:42

0

Try putting the footer.html code directly in your main PHP file after the </body> tag. also, have you added overflow attribute for making your page scrollable in the CSS file?

edited Jan 29 '22 at 09:42

Toto

89,455
62
89
125

answered Jan 29 '22 at 04:29

siddxx18

13
6

Why is my page content going under the footer?

3 Answers3