【发布时间】：2021-09-26 05:59:33
【问题描述】：
所以我正在使用 HTML、CSS 和 JS 编写我的第一个网站。
我过去遇到过一些问题，但我已经能够使用各种 Stack Overflow 线程、youtube 视频等来解决问题，但是，我一直在尝试解决我的页脚问题大约一个小时。
起初，当调整窗口大小时，页脚会向右移动以便为文本腾出空间。在对位置做了一些恶作剧之后：absolute;和位置：相对；我能够让它停留在底部而不是向右移动。
现在我正在移动的文本最终位于标题后面...这是我的一个页面的 HTML 和 CSS 代码。
这是整个 HTML 文件：
<!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>Writers Guild</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mukta:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
<a href="/" id="navbar__logo"><i class="fas fa-pen-nib"></i> Writers Guild</a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="/" class="navbar__links">Home</a>
</li>
<li class="navbar__item">
<a href="/members.html" class="navbar__links">Members</a>
</li>
<li class="navbar__item">
<a href="/about.html" class="navbar__links">About</a>
</li>
<li class="navbar__item">
<a href="/works.html" class="navbar__links">Works</a>
</li>
<li class="navbar__item">
<a href="/member-login.html" class="navbar__links">Login</a>
</li>
<li class="navbar__btn">
<a href="/sign-up.html" class="button">Sign Up</a>
</li>
</ul>
</div>
</nav>
<!-- Main About Page -->
<!-- Style settings to utilize within the text -->
<style>
.centeralign {
text-align: center; /*creation of a style that allows .centeralign when creating any text type */
}
</style>
<style>
.indented {
padding-left: 25pt;
padding-right: 25pt;
}
</style>
<style>
p {
text-indent: 30pt
}
</style>
<div class="about__section">
<div class="about__container">
<div class="about__content-section">
<div class="about__title">
<br>
<h1 class="centeralign">About the Writers Guild</h1>
</div>
<div class="indented">
<br>
<div class="intro">
<p>The Writers Guild is a club at St. Joseph's High School which encourages students to further their skills with the written word.</p>
</div>
<br>
<div class="explanation">
<br>
<p>The Guild is officially run by: Mrs. Rancourt</p>
<p>When arriving at a common session, everyone will arrive and take their seats.
Depending on the week, two main things will happen:</p>
<ul>
<br>
<li>Everyone will have the opportunity to share their personal works or
a work of someone they enjoy. Everyone else present will offer feedback, comments and impressions,
and constructive criticism (if it is wanted).
</li>
<br>
<h4><em>OR</em> </h4>
<br>
<li>Everyone present can contribute any writing prompts they may have found or come up with,
and, following the conclusion of this, there will be a brief 30 minute writing session. Once the time
is up, everyone will share what they have written, and feedback will follow.
</li>
</ul>
</div>
<div class="rules">
<br>
<p>At the Writers Guild, there are a set of <a href="/rules.html">rules</a> that each and every member must follow.
These rules are more with regard to respect for each other than they are about anything else.
</p>
</div>
</div>
</div>
<div class="about__image-section">
<img src="/images/fancy-writer.jpeg" alt="">
</div>
</div>
</div>
<!-- FOOTER -->
<div class="footer__wrapper">
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
<h2>Information</h2>
<a href="/about.html">About the Guild</a>
<a href="/rules.html">Rules</a>
<a href="/members.html">Members</a>
</div>
<div class="footer__link--items">
<h2>Contact</h2>
<a href="/sign-up.html">Questions/Inquiries</a>
<a href="/website-help.html">Website Support</a>
</div>
<div class="footer__link--items">
<h2>Other</h2>
<a href="/works.html">Uploaded Works</a>
<a href="/member-login.html">Member Registry</a>
</div>
</div>
</div>
<div class="footer__pic">
<a href="/" id="footer__logo"><i class="fas fa-pen-nib"></i>Writers Guild</a>
</div>
<div class="website__rights">
<br>
<h5 class="centeralign"> © SJO Writers Guild 2021. All Rights Reserved. </h5>
<h6 class="centeralign">Website Design and Programming: Jason Mueller</h5>
</div>
</div>
</div>
<script src='app.js'></script>
</body>
</html>
CSS 部分：
.footer__wrapper{
position: relative;
}
.footer__container {
background-color: #252525;
padding: 1rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
min-height: 150px;
width: 100%;
}
#footer__logo{
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links{
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper{
display: flex;
}
.footer__link--items{
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 12px;
/* text-decoration: underline; */
}
.footer__link--items > h2 {
color: #f3f3f3;
}
.footer__link--items a {
color: #f3f3f3;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: all 0.3s ease-out;
}
.website__rights {
color: #fff;
}
@media screen and (max-width: 550px){
.footer__links{
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
margin-bottom: 2rem;
}
.footer__link--wrapper{
flex-direction: column;
}
}
@media screen and (max-width: 480px){
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Section for About Page */
.about__section{
width: 100%;
min-height: 100vh;
background-color: #f3f3f3;
}
.about__container{
width: 80%;
display: block;
margin: 0 auto;
padding-top: 25px;
}
.about__content-section{
float: left;
width: 55%;
overflow: auto;
}
.about__image-section{
float: right;
width: 40%;
margin: 30px 10px;
}
.about__image-section img{
width: 100%;
height: auto;
padding-bottom: 2rem;
}
.about__content-section .about__title{
font-size: 19px;
background-color: #0f4061;
background-image: linear-gradient(to top, #8b1b0c 20%, #f7e011 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.about__content-section .indented .intro{
color: #5d5d5d;
font-family: 'Mukta', sans-serif;
font-weight: 600;
font-size: 20px;
}
.about__content-section .indented .explanation {
font-family: sans-serif;
line-height: 1.25;
}
.about__content-section .indented .explanation h4{
text-align: center;
}
.about__content-section .indented .explanation {
font-size: 18px;
}
.about__content-section .indented .rules {
font-size: 18px;
font-family: 'Kumbh Sans', sans-serif;
}
.about__content-section .indented .rules p a {
text-decoration: none;
}
.about__content-section .indented .rules p a:hover {
color: rgb(51, 79, 201)
}
（关于上下文，如果你想知道这一切是为了什么，我高中的老英语老师让我为她的作家协会创建一个网站）
如果放置整个 CSS 文件并添加 JS 文件有助于网站正常运行，请告诉我。不确定使用我所有混乱的代码来解决这个问题有多容易。使用了数十种不同的来源，而我的整体组织和命名约定等可能很糟糕。
我知道该文件很大，需要挑选的内容很多，但我们将不胜感激。
谢谢
【问题讨论】：
-
制作一个codepen并分享链接codepen.io/pen。如果您付出一些努力来建立并运行一个活生生的例子，会有更多人愿意提供帮助
-
查看this 为您的页面创建页眉和页脚
-
@jpsweeney94 会在我下班回家后立即处理。不知道问题有多大，也不知道是否容易找到。谢谢
标签： html css web resize footer