Fatal编程技术网
  • html/
  • Html 如何保持页脚向下

Html 如何保持页脚向下

html css

Html 如何保持页脚向下,html,css,Html,Css,这是页脚 #页脚{ 位置：绝对位置； 宽度：100%； 身高：10%； 利润率最高：1%； 底部：0px； 最高：99%； } #版权所有{ 浮动：左； 字体：标准12px/1.3em Arial，“ms pgothic”，helvetica，无衬线； 颜色：#616060； 左边距：15%； } #linkedin{ 浮动：对； 右边距：15%； 颜色：#043551； 字体：标准20px Arial，'ms pgothic'，helvetica，无衬线； } ©2016年公司 跟我们走

这是页脚

#页脚{
位置：绝对位置；
宽度：100%；
身高：10%；
利润率最高：1%；
底部：0px；
最高：99%；
}
#版权所有{
浮动：左；
字体：标准12px/1.3em Arial，“ms pgothic”，helvetica，无衬线；
颜色：#616060；
左边距：15%；
}
#linkedin{
浮动：对；
右边距：15%；
颜色：#043551；
字体：标准20px Arial，'ms pgothic'，helvetica，无衬线；
}

©2016年公司
跟我们走
您的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;
}
你的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;
}
你可以改变位置：绝对；位置：固定； 检查此链接中的代码：

你可以改变位置：绝对；位置：固定； 检查此链接中的代码：

你试过这个吗

#主体{高度：100vh；}

这是主体
这是页脚
您试过这个吗

#主体{高度：100vh；}

这是主体
这是页脚
此页面永远不会完全按照您希望的方式工作，因为它无效。一个页面上只能有一个
、一个
、一个
、一个
，并按特定顺序排列

在您先解决该问题之前，这是浪费时间。浏览以下页面：

<!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>


服务
©2016泰克龙解决方案
跟我们走
此页面永远不会完全按照您希望的方式工作，因为它无效。一个页面上只能有一个
、一个
、一个
、一个
，并按特定顺序排列

在您先解决该问题之前，这是浪费时间。浏览以下页面：

<!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>


服务
©2016泰克龙解决方案
跟我们走

底部：0px；顶部：自动
或者为什么要给
top
只需使用
bottom
并移除
top
，还需要在主容器中添加
padding bottom
，为页脚留出空间。取出
bottom:0px
和
top:99%
您的css中有
html，body{height:100%}
。将其更改为
min height
。您的包装器div打击超过了100%，导致了问题。您还可以将页脚设置为相对位置
absolute
仅适用于缺少内容的情况，而您没有。请尝试此
bottom:0，position:fixed
@VishalPanara否，如果他修复了页脚，它将不在网站底部，而是在屏幕底部。即使他不在网站的底部，它也会一直在这里。
bottom:0px；顶部：自动
或者为什么要给
top
只需使用
bottom
并移除
top
，还需要在主容器中添加
padding bottom
，为页脚留出空间。取出
bottom:0px
和
top:99%
您的css中有
html，body{height:100%}
。将其更改为
min height
。您的包装器div打击超过了100%，导致了问题。您还可以将页脚设置为相对位置
absolute
仅适用于缺少内容的情况，而您没有。请尝试此
bottom:0，position:fixed
@VishalPanara否，如果他修复了页脚，它将不在网站底部，而是在屏幕底部。它将永远在这里，即使他不在网站的底部。