好的，我尝试将页脚留在网页的底部，但是当我向下滚动时，它只是停留在中间而不是页面的底部。我不确定自己在做什么错。这是我的代码：
div {
border-radius: 5px;
}
#header {
z-index: 1;
position: fixed;
width: 97.5%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
#name {
float: left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email {
float: right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
li {
list-style-type: square;
}
a:hover {
font-weight: bold;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 10%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 88%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: absolute;
bottom: 0;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: absolute;
bottom: 0;
padding-top: 15px;
}<div id="header">
<p id="name">Sonya Jenkins</p>
<a href="mailto:[email protected]">
<p `enter code here`id="email">[email protected]</p>
</a>
</div>
<div class="left"></div>
<div class="right">
<h4>Professional Summary</h4>
<p>Highly skilled ADF Developer has broad experience with the design `enter code here`and development of technology applications to enhance existing `enter code here`infrastructure for cost-effectiveness. Brings a highly `enter code here`analytical mind
with excellent capabilities in problem solving. Offers `enter code here`a Master’s of Science degree in Information Technology along `enter code here`with nine years of experience as an ADF Developer.</p>
<h4>Core Qualifications</h4>
<ul>
<li>Experienced with INV, PO, WIP, AP & OPM Oracle Applications `enter code here`modules</li>
<li>Clear communication abilities, both orally and in writing</li>
<li>Strong experience with event-driven architecture</li>
<li>Excellent analytical and problem-solving abilities</li>
<li>Good at analysis of user issues and identifying solutions</li>
</ul>
<h4>Experience</h4>
<p>June 2009 to July 2014 Shell Oil Company, New Cityland, CA ADF Developer</p>
<ul>
<li>Created new applications and enhanced existing ones to meet `enter code here`business needs.</li>
<li>Performed analysis of business technology needs.</li>
<li>Assisted in systems planning and implementation.</li>
<li>Created complex prototypes.</li>
<li>Collaborated with functional analysts to ensure quality of `enter code here`applications.</li>
</ul>
<p>May 2005 to May 2009 Better Business Systems, New Cityland, CA ADF `enter code here`Developer</p>
<ul>
<li>Collaborated with senior application developers to make `enter code here`technology recommendations.</li>
<li>Designed and developed changes to application subsystems.</li>
<li>Coded, tested and debugged new, complex software applications. `enter code here`</li>
<li>Performed quality assurance to ensure applications deliverables `enter code here`met customer standards.</li>
<li>Monitored developers to ensure compliance with standards.</li>
</ul>
<h4>Education</h4>
<p>2005 California Pacific University, New Cityland, CA</p>
<ul>
<li>Master of Science in Information Technology</li>
</ul>
<p>2003 California Pacific University, New Cityland, CA</p>
<ul>
<li>Bachelor of Science in Information Technology</li>
</ul>
</div>
<div id="footer">
<p>123 Main Street, San Francisco, CA 94122 | Home: 000-000-0000 Cell: 000-000-0000</p>
</div>最佳答案
为了使position: absolute正常工作，它必须位于其他具有不同位置的项的内部，例如：position: relative。
尝试制作您的<BODY>容器，或者最好创建另一个名为“ container”和position: relative的容器，并为其设置一个大小，然后在其中添加页脚。绝对元素将相对于父元素放置。
这是一个示例：http://codepen.io/sequential/pen/bgayLj
希望这可以帮助 ：）
关于html - 将页脚放在HTML/CSS的底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41948256/