Question

在下面的html中，页脚没有固定在页面底部。

我该如何解决这个问题？

我设计了一个示例网站，中间有一个日志和一个菜单。现在我需要在页面中添加文本，但页脚需要在底部静止。但目前页脚正在文本旁边呈现。任何人都可以帮助我

HTML

<div  style="margin-top: 578px; font-size: 31px; max-width:100%;margin:0 auto; float:left; color: orange;">UNDER CONSTRUCTION</div>
<footer>
<div class="footer">
    <div class="container">
        <p>Address:- D-000, Text Text, Text. Text, Text (Text), Text-000 0000, Text <br>
Mobile : +91 000-000-0000 Phone : + 0000 0000 0000 Fax : + 0000 0000 0000 <br>
Email: abc@gmail.com<br>
Copyright &copy; 2015 OLISVELL, Inc.</p>

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

式

.footer {
color:#EEEEE; 
font: italic 12px/30px Arial;
position: relative;
 width: 100%; 
  float: left;
 bottom: 0; 
  padding-bottom: 2px;
  min-height: 43px;

background:#000000;
}

.footer p{

color:#ffffff;

font-weight:600;
float:left;
text-align:left;

}

Answer 1

假设body元素是页脚父元素，那么应用于body的样式需要应用于父元素。

body{
  height:100%;
  position:relative;
}

footer{
  width:100%;
  position:absolute;  // or fixed, depending on your use
  bottom:0;
  left:0;
}

Answer 2

请参阅此示例：http://jsfiddle.net/kevalbhatt18/06rggkLb/1/

Difference between absolute and fixed position

在您的示例中，您的CSS只有正确才需要更改位置。即 位置：相对于位置：已修复

你正在使用bootstrap看到这个bootstrap解决方案

http://getbootstrap.com/examples/sticky-footer/他们正在使用position：absolute

如果您使用绝对值，请确保您的页脚不在任何具有某个位置的div中。因此，如果你申请绝对位置，那么将你的页脚放在正文

的

的
.footer { color:#EEEEE; font: italic 12px/30px Arial; position: fixed; width: 100%; float: left; bottom: 0; padding-bottom: 2px; min-height: 43px; background:#000000; }

的

如何在bootstrap上使用HTML创建固定页脚

2 个答案: