Question

这是页脚

#footer {
  position: absolute;
  width: 100%;
  height: 10%;
  margin-top: 1%;
  bottom: 0px;
  top: 99%;
}
#copyright {
  float: left;
  font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
  color: #616060;
  margin-left: 15%;
}
#linkedin {
  float: right;
  margin-right: 15%;
  color: #043551;
  font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
}

<div id="footer">
  <div id="copyright">
    © 2016 copmpany
  </div>
  <div id="linkedin">
    Follow us on
    <a href="https://www.linkedin.com/">
      <img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
    </a>
  </div>
</div>

这是怎样的looks like。这应该是look like。我不想使用position:absolute，我想让它适用于所有屏幕和网站的所有页面。如果我使用绝对，那么当我使用手机时，它会下降太多。

我已尝试过所有内容，包括使用.container{ max-height:140%;}并将页脚放置99％距离但不起作用，没有任何效果。我不能使用固定位置，因为在我链接的服务页面上，某些屏幕上的高度达到130％。

Answer 1

你可以改变位置：绝对;定位：固定; 请检查此链接中的代码：https://jsfiddle.net/4qyojap2/

#footer{
  background: #F3F5F6;
  position: fixed;
    width: 100%;
    height: 30px;
    padding:20px;
    bottom: 0px;
}
#copyright{
  float: left;
  font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
    color: #616060;
    margin-left: 15%;
}
#linkedin{
  float: right;
  margin-right: 15%;
  color: #043551;
  font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}

Answer 2

此页面将永远不会按照您希望的方式运行，因为它无效。您只能在页面上按特定顺序拥有一个<!doctype html>，一个<html>，一个<head>和一个<body>。

在您首先解决该问题之前，这是浪费时间。通过以下方式运行您的页面： VALIDATOR

<!doctype html>
<html>
<head>
   <!--<link>, <script>, <style>, <title>, <meta> are typically here.-->
</head>
<body>
    <!-- Your content <div>, <p>, <span>, etc. goes here.-->
</body>
</html>

您的页面如下所示：

<!DOCTYPE html>
 <html>
 <head>
 <title>Services</title>
 </head>
 <body>
 <div class="index_wrapper">
 <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="styles.css">
 <title></title>
 </head>
<body>

   <!------CONTENT------>

</body>
</html>

<div class="container">
<div class="service_title">
</div>

<table>
    <!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES---->
</table>





</div>
</div>
</div>

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="footer">
<div id="copyright">
© 2016 Tycron Solutions
</div>
<div id="linkedin">
    Follow us on <a href="https://www.linkedin.com/company/tycron-solutions">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>

</div>
</div>
</body>
</html></div>
</body>
</html>

Answer 3

你的CSS说：

bottom: 0px;
top:99%;

这不是必需的，因为您的div已经位于HTML的底部。如果你压制这两行，页脚将正确定位。

新CSS：

#footer{
  position: absolute;
    width: 100%;
    height: 10%;
    margin-top: 1%;
}
#copyright{
  float: left;
  font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
    color: #616060;
    margin-left: 15%;
}
#linkedin{
  float: right;
  margin-right: 15%;
  color: #043551;
  font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}

Answer 4

你试过这个吗？

#main-body{height:100vh;}

<header role="header">
 <nav role="navigation">
   <a href="#">Home</a>
 </nav>
</header>
<div id="main-body">
  this is the main body
</div>
<footer role="footer">
  this is the footer
</footer>

或者你可以在它上面使用jQuery，

//declare height of the "#main-body"
$("#main-body").css('height' : $(window).height()+'px');

希望这有帮助。干杯！

如何保持页脚

4 个答案: