HTML/CSS my footer is not working as intended-CodePudding

So, 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  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" >
        <div>
            <div>
                <textarea style="height: auto;"  name="notes" rows="20" col = "15" placeholder="Type notes to ADD"></textarea>
            </div>
        </div>
    <button  type="submit">Add Notes</button>
</form>
<form action="advisor_edit_notes.php">
    <button  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:[email protected]">[email protected]</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;
}

CodePudding user response：

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?

CodePudding user response：

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.