将页脚保持在HTML / CSS的底部

时间：2017-01-31 01:18:42

标签： html css

好的，所以我试图让页脚停留在我的网页底部，但是当我向下滚动它只是停留在页面底部而不是在页面底部。我不知道我做错了什么。这是我的代码：

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@example.com">
    <p `enter code here`id="email">email@example.com</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>

3 个答案:

答案 0 :(得分：0)

为了让position: absolute正常工作，它需要位于另一个具有不同定位的项目中，例如：position: relative。

尝试制作<BODY>容器，或者最好创建另一个名为'容器'和position: relative的容器并给它一个大小，然后在里面添加你的页脚。您的绝对元素将放置在您的父元素中。

以下是一个示例：http://codepen.io/sequential/pen/bgayLj

希望这会有所帮助：）

答案 1 :(得分：0)

您的页脚没有指定宽度，此处现在有100% width

＆＃13;
＆＃13; 
body {
  padding-bottom: 60px;
}
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: fixed;
  bottom: 0;
  width: 100%;
  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;
}
＆＃13; 
<div id="header">
  <p id="name">Sonya Jenkins</p>
  <a href="mailto:email@example.com">
    <p `enter code here`id="email">email@example.com</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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

在#footer添加width: 97.5%; 

#footer {
  position: fixed;
  bottom: 0;
  width: 97.5%;
  height: 50px;
  background-color: #668284;
  clear: both;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  text-align: center;
  color: #ffffff;
}
相关问题
最新问题