调整窗口大小时，网站上的主要文本最终位于页脚后面
Posted
技术标签:
【中文标题】调整窗口大小时，网站上的主要文本最终位于页脚后面【英文标题】：Main text on website ends up behind footer when resizing window 【发布时间】：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" >
</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 会在我下班回家后立即处理。不知道问题有多大，也不知道是否容易找到。谢谢 【参考方案1】：从
footer__container中删除position:absolute当主高度不固定时，不应将
absolute设置为footer。
【讨论】：
这实际上有很大帮助 - 现在当我调整窗口大小时，它可以正常工作，只是背景以白色结束，而不是向下带灰色。当我下班回家时，我将制作一个 codepen.io/pen，希望能展示更多我遇到的问题。【参考方案2】：Tbh，我不知道这里的确切问题，但我会建议你使用像 Bootstrap 这样的 Css 框架，它们反应灵敏，你不需要为这一切烦恼。您可以尝试集成 Bootstrap 并检查它的运行情况，相信我 Bootstrap 非常容易学习
【讨论】：
以上是关于调整窗口大小时，网站上的主要文本最终位于页脚后面的主要内容，如果未能解决你的问题，请参考以下文章
当 QML 滚动条位于底部并且窗口高度被调整大小时，它不会更新