我正在尝试为我的网站制作主页。我做了一个漂亮的页脚，但它并没有完全按计划进行。我希望页脚留在"屏幕"的底部(不是孔页(，但它似乎在屏幕之外。我尝试过使用边距顶部：-70px;但我找不到问题所在。
PS：我会将px更改为vh或vw，所以我不需要有关此的提示：-(
我的代码：
html, body {
height: 100%;
margin: 0;
}
body:before {
content: "";
height: 100%;
float: left;
width: 0;
}
#other {
margin-bottom: 5%;
}
#container {
height: 94vh;
}
#main {
overflow: auto;
padding-top: 31vh;
}
#foot {
height: 70px;
background-color: #696161;
position: relative;
margin-bottom: -200px;
clear: both;
}
.footText {
color: #D4CFCB;
list-style: none;
padding-left: 45px;
padding-bottom: 10px;
text-decoration: underline;
float: left;
padding-top: 10px;
}
.footText:hover {
font-style: italic;
cursor: pointer;
}
#footList {
float: right;
margin-right: 100px;
}
#copyright {
float: left;
}
.copyrightText {
color: #D4CFCB;
list-style: none;
padding-left: 45px;
padding-bottom: 10px;
text-decoration: underline;
float: left;
padding-top: 10px;
}
.menu {
width: 50%;
height: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow-y: hidden;
display: block;
}
#visitForum button {
height: auto;
width: auto;
font-size: 25px;
}
#visitForum {
text-align: center;
width: 25%;
height: 300px;
float: right;
}
.game {
text-align: center;
}
#logo {
height: auto;
width: 20vw;
position: fixed;
margin-top: 1vh;
margin-left: 1vw;
background-color: white;
}
.mainP {
margin-left: auto;
margin-right: auto;
width: 40%;
}
.title {
margin-bottom: 0;
font-size: 3vw;
}
#underTitle {
font-size: 27px;
}
#navbar {
width: 31vw;
position: fixed;
top: 0;
left: 50%;
z-index: 100;
background-color: black;
}
#navbar #navHolder {
height: 69px;
border-bottom: 1px solid black;
width: 560px;
padding-left: 30px;
}
#navbar #navHolder ul {
list-style: none;
margin: 0;
padding: 0;
}
#navbar #navHolder #navbarul #navbarli #navbara {
text-decoration: none;
float: left;
margin-right: 5px;
font-family: "Impact", Gadget, sans-serif;
font-size: 23px;
color: white;
border: 1px solid #000;
padding: 20px;
width: 60px;
text-align: center;
display: block;
background: black;
}
#navbar #navHolder ul li a:hover {
background: white;
color: #808080;
text-shadow: 2px 2px 2px #000;
}
#modelsPage {
display: none;
}
#scriptsPage {
display: none;
}
#terms {
text-align: center;
font-style: italic;
width: 40%;
right: 50%;
margin-right: auto;
margin-left: auto;
margin-top: -875px;
}
#signup {
display: none;
margin-top: -40%;
width: 50%;
margin-right: auto;
margin-left: auto;
}
/* Full-width input fields */
input[type=text], input[type=password], input[type=email] {
width: 95%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for all buttons */
.signupbtns {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.cancelbtn:hover .signupbtn:hover {
opacity: 1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.signupcontainer {
padding: 16px;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
/* The div storing the login form */
#login {
display: none;
height: 685px;
width: 633px;
margin-left: auto;
margin-right: auto;
margin-top: -800px;
}
/* Bordered form */
#loginForm {
border: 3px solid #f1f1f1;
height: 100%;
width: 100%;
}
/* Set a style for all buttons */
.loginbtn {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Add a hover effect for buttons */
.loginbtn:hover {
opacity: 0.8;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.loginContainter {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
@media screen and (max-width:1499px) {
#signup {
margin-top: -40%;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<title>Home | Gamanware</title>
<meta name="robots" content="index, follow" />
<meta name="description" content="Gamanware is a company producing games, models, scritps and more for gamers and developers!" />
<meta name="keywords" content="gamanware, Gamanware, games, developers, gamers, models, scripts, home" />
</head>
<body>
<div id="container">
<div id="main">
<div style="width: 100%; z-index: 0; right:auto; left: auto; top: 0; height: 140px;">
<img id="logo" src="Images/Gamanware_Logo.png" />
<div id="navbar">
<div id="navHolder">
<ul id="navbarul">
<li id="navbarli"><a id="navbara" href="#" onclick="openPage('home.php')" id="onlink">HOME</a></li>
<li id="navbarli"><a id="navbara" href="#" onclick="openPage('games.html')">GAMES</a></li>
<li id="navbarli"><a id="navbara" href="#" onclick="openPage('other.html')">OTHER</a></li>
<li id="navbarli"><a id="navbara" href="#" onclick="openPage('about.html')">ABOUT</a></li>
<li id="navbarli"><a id="navbara" href="#" onclick="openPage('forum.html')">FORUM</a></li>
</ul>
</div>
</div>
</div>
<div id="home" class="menu">
<h1 class="title">Welcome to Gamanware!</h1>
<h3 id="underTitle">We are working hard!</h3>
<p class="mainP">
We have games, models and scripts currently waiting for you to download!
We hope you will enjoy any product you would like to download.
If you are using models, scripts or something like that, we recommend reading the terms and conditions,
found at the bottom of the page.
</p>
<p class="mainP">
We think you will like one of these products:
<ul style="list-style-type:none">
<li><button onclick="openPage('games.html')">Fort Olympus</button></li>
</ul>
</p>
</div>
</div>
</div>
<div id="terms" style="display:none">
<p>
Terms and Conditions
<br />
--------------------
<br />
Please read these Terms and Conditions
carefully before using the https://gamanware.ga website
operated by Gamanware.
<br />
Your access to and use of the Service is conditioned on your acceptance of and
compliance with these Terms. These Terms apply to all visitors, users and
others who access or use the Service.
<br />
By accessing or using the Service you agree to be bound by these Terms. If you
disagree with any part of the terms then you may not access the Service. This
Terms and Conditions agreement for Gamanware is powered by
<a href="https://termsfeed.com/" target="_blank">TermsFeed</a>
<br /><br />
Accounts
<br />
--------
<br />
When you create an account with us, you must provide us information that is
accurate, complete, and current at all times. Failure to do so constitutes a
breach of the Terms, which may result in immediate termination of your account
on our Service.
<br />
You are responsible for safeguarding the password that you use to access the
Service and for any activities or actions under your password, whether your
password is with our Service or a third-party service.
<br />
You agree not to disclose your password to any third party. You must notify us
immediately upon becoming aware of any breach of security or unauthorized use
of your account.
<br /><br />
Links To Other Web Sites
<br />
------------------------
<br />
Our Service may contain links to third-party web sites or services that are
not owned or controlled by Gamanware.
<br />
Gamanware has no control over, and assumes no responsibility for, the content,
privacy policies, or practices of any third party web sites or services. You
further acknowledge and agree that Gamanware shall not be responsible or
liable, directly or indirectly, for any damage or loss caused or alleged to be
caused by or in connection with use of or reliance on any such content, goods
or services available on or through any such web sites or services.
<br />
We strongly advise you to read the terms and conditions and privacy policies
of any third-party web sites or services that you visit.
<br /><br />
Termination
<br />
-----------
<br />
We may terminate or suspend access to our Service immediately, without prior
notice or liability, for any reason whatsoever, including without limitation
if you breach the Terms.
<br />
All provisions of the Terms which by their nature should survive termination
shall survive termination, including, without limitation, ownership
provisions, warranty disclaimers, indemnity and limitations of liability.
<br />
We may terminate or suspend your account immediately, without prior notice or
liability, for any reason whatsoever, including without limitation if you
breach the Terms.
<br />
Upon termination, your right to use the Service will immediately cease. If you
wish to terminate your account, you may simply discontinue using the Service.
<br />
All provisions of the Terms which by their nature should survive termination
shall survive termination, including, without limitation, ownership
provisions, warranty disclaimers, indemnity and limitations of liability.
<br /><br />
Governing Law
<br />
-------------
<br />
These Terms shall be governed and construed in accordance with the laws of
Norway, without regard to its conflict of law provisions.
<br />
Our failure to enforce any right or provision of these Terms will not be
considered a waiver of those rights. If any provision of these Terms is held
to be invalid or unenforceable by a court, the remaining provisions of these
Terms will remain in effect. These Terms constitute the entire agreement
between us regarding our Service, and supersede and replace any prior
agreements we might have between us regarding the Service.
<br /><br />
Changes
<br />
-------
<br />
We reserve the right, at our sole discretion, to modify or replace these Terms
at any time. If a revision is material we will try to provide at least 30 days
notice prior to any new terms taking effect. What constitutes a material
change will be determined at our sole discretion.
<br />
By continuing to access or use our Service after those revisions become
effective, you agree to be bound by the revised terms. If you do not agree to
the new terms, please stop using the Service.
<br /><br />
Contact Us
<br />
----------
<br />
If you have any questions about these Terms, please contact us
or join the forum.
</p>
<button onclick="closeTerms()">Back</button>
</div>
<div id="login">
<form id="loginForm" method="post" action="login.php">
<div class="imgcontainer">
<img src="Images/LoginAvatar.png" alt="Avatar" class="avatar">
</div>
<div class="loginContainer" style="width: 90%; margin-left: auto; margin-right: auto;">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit" class="loginbtn">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<p>Need an account? Sign up <a href="#" onclick="login_signup()">here!</a></p>
</div>
<div class="loginContainer" style="background-color:#f1f1f1; margin-left: 5%; margin-right: 5%;">
<button type="button" class="cancelbtn" onclick="closeLogin(false)">Cancel</button>
<span class="psw">Forgot <a href="#" onclick="openPage('forgotPassword.html')">password?</a></span>
</div>
</form>
</div>
<div id="signup">
<form method="post" action="signup.php" style="border:1px solid #ccc; height: 720px;">
<div class="signupcontainer">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<div><?= $_SESSION['message'] ?></div>
<label for="un"><b>Username*</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="psw"><b>Password*</b></label>
<input id="psw" type="password" placeholder="Enter Password" name="password" required>
<label for="psw-repeat"><b>Repeat Password*</b></label>
<input id="psw-repeat" type="password" placeholder="Repeat Password" name="confirm_password" required>
<label for="em"><b>Email</b></label>
<input type="email" placeholder="Enter Email" name="email">
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our <a href="#" onclick="openTerms()" style="color:dodgerblue">Terms & Conditions</a>.</p>
<p>Already got an account? Login in <a href="#" onclick="signup_login()">here!</a></p>
<div class="clearfix">
<button type="button" class="cancelbtn signupbtns" onclick="closeSignUp()">Cancel</button>
<button type="submit" class="signupbtn signupbtns">Sign Up</button>
</div>
</div>
</form>
</div>
<footer id="foot">
<div id="copyright">
<p class="footText">© Copyright 2018 Gamanware</p>
</div>-
<ul id="footList">
<li class="footText" onclick="visitForum()">Forum</li>
<li class="footText" onclick="openTerms()">Terms and Conditions</li>
<li class="footText" onclick="openSignUp()">Sign Up</li>
<li class="footText" onclick="openLogin()">Login</li>
</ul>
</footer>
</body>
</html> 代码笔演示
您可以使用此将页脚放置在页面底部
footer {
position: absolute;
bottom: 0;
left: 0;
}
html {
min-height: 100%;
}
我也从您的#main中删除了这些值，#container
因为它们弄乱了页面的动态高度。