【发布时间】：2017-02-12 23:53:55
【问题描述】：
所以我知道这里还有其他结果是针对这个问题的，但是我有一个相对“完成”的代码，如果我可以避免的话，我不想过多地弄乱它。
基本上，我网站上的所有内容看起来都符合我的要求，除了在较大的显示器上，页脚不会粘在屏幕底部，而且我的页脚和底部之间有这么大的丑陋差距的屏幕。
以下是我的索引和 css 文件。页脚元素在结束标记之间被挤来挤去，没有任何效果。我把它放在我的主要内容之外并尝试了 bottom: 0;与位置：绝对；它只是导致页脚的右端超出了我在容器中指定的宽度。
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
<a href="index.html">Home</a>
<a href="music.html">Music</a>
<a href="photos.html">Photos</a>
<a href="poetry.html">Poetry</a>
<a href="about.html">About</a>
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>【问题讨论】：
-
position: fixed工作吗？ -
不，它确实工作了一段时间，但问题是它出现在页面加载时的屏幕上，有时会出现在我已经在屏幕上的内容之上。我只想让内容留在屏幕底部，在我碰巧在该页面上拥有的任何内容下方。
标签： html css position footer spacing