HTML/CSS 我的页脚没有按预期工作答案

【问题标题】：HTML/CSS my footer is not working as intendedHTML/CSS 我的页脚没有按预期工作
【发布时间】：2022-01-29 17:42:04
【问题描述】：

所以，我的 html 页面的页脚下方有内容。有人可以帮我使页面变长吗以便您可以向下滚动查看页脚？或使其页脚从内容结束的地方开始（首选）？不知道我做错了什么。
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>

页脚.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;
}

【问题讨论】：

应该关闭的两个关闭</div> 标签是什么？ ...页脚是否需要像页眉一样位于 div 中？从删除那些关闭 div 标记开始，看看是否有任何变化。
另外，this answer 可能会感兴趣。
两个结束标签用于一个空的 div，我将其删除，以及
好的，谢谢你的信息。
警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!

【解决方案1】：

固定位置可能不是您想要的听起来像？固定将始终通过滚动将其保留在页面上。如果您只希望它保持在底部，我会认为 static 是您想要的位置 - 这是默认值。

我有什么误解吗？

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

位置：固定；具有位置的元素：固定；被定位相对于视口，这意味着它始终保持不变即使页面滚动也可以放置。顶部、右侧、底部和左侧属性用于定位元素。

一个固定的元素不会在页面中留下它应该的间隙通常已经找到了。

【讨论】：

另外，我同意以上 Paul T. 的观点，即使用 display:flex 是解决此问题的绝佳选择！