Fatal编程技术网
  • html/
  • Html 如何将页脚（div）与页面底部对齐？

Html 如何将页脚（div）与页面底部对齐？

html css

Html 如何将页脚（div）与页面底部对齐？,html,css,footer,alignment,Html,Css,Footer,Alignment,有人能解释一下如何将页脚div与页面底部对齐吗。从我所看到的示例中，它们都显示了如何使div保持在底部可见，而不管您在哪里滚动页面。虽然我不想那样。我希望它固定在页面底部，这样它就不会移动。谢谢你的帮助 这将使div固定在页面底部，但如果页面较长，则只有向下滚动时才可见 <style type="text/css"> #footer { position : absolute; bottom : 0; height : 40px; margin-t

有人能解释一下如何将页脚div与页面底部对齐吗。从我所看到的示例中，它们都显示了如何使div保持在底部可见，而不管您在哪里滚动页面。虽然我不想那样。我希望它固定在页面底部，这样它就不会移动。谢谢你的帮助

这将使div固定在页面底部，但如果页面较长，则只有向下滚动时才可见

<style type="text/css">
  #footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    margin-top : 40px;
  }
</style>
<div id="footer">I am footer</div>


#页脚{
位置：绝对位置；
底部：0；
高度：40px；
边缘顶端：40px；
}
我是页脚
高度和页边距顶部应相同，以便页脚不会显示在内容上方。

更新

我原来的答案是很久以前的，链接断了；更新它，使其继续有用

我将包括更新的内联解决方案，以及JSFIDLE上的工作示例。注意：我依赖于CSS重置，尽管我没有将这些样式内联。指

解决方案1-保证金抵消

HTML

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
解决方案2-flexbox

HTML

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
以下是一些更详细的解释和不同方法的链接：

原始答案

这就是你的意思吗

此方法仅使用15行CSS，几乎不使用任何HTML标记。更好的是，它是完全有效的CSS，在所有主流浏览器中都可以使用。Internet Explorer 5及以上、Firefox、Safari、Opera等

此页脚将永久保留在页面底部。这意味着，如果内容超过浏览器窗口的高度，则需要向下滚动以查看页脚。。。但是如果内容低于浏览器窗口的高度，页脚将停留在浏览器窗口的底部，而不是在页面中间浮动。
如果您在实施过程中需要帮助，请告诉我。我希望这能有所帮助。

看看这个，它可以在firefox和IE上使用

<style>
    html, body
    {
        height: 100%;
    }
    .content
    {
        min-height: 100%;
    }
    .footer
    {
        position: relative;
        clear: both;
    }
</style>

<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>


html，正文
{
身高：100%；
}
.内容
{
最小高度：100%；
}
.页脚
{
位置：相对位置；
明确：两者皆有；
}
页面内容
这是我的页脚
您的标题和注释暗示您没有在寻找粘性页脚（当内容在窗口下方滚动时，粘贴在窗口底部）。我假设您正在寻找一个页脚，如果内容没有填满窗口，页脚将被迫放在窗口底部，如果内容超出窗口边界，页脚将向下推到内容底部

您可以通过以下步骤来实现这一点

<style>
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}
</style>

<div id="container">
    <div id="header">header</div>
    <div id="body">body</div>
    <div id="footer">footer</div>
</div>
资料来源：

我是个新手，这些方法对我不起作用。但是，我尝试了css中的边距顶部属性，并简单地添加了内容像素+5的值

示例：我的内容布局高度为1000px，因此我在页脚css中添加了一个边距上限值1005px，这给了我一个5px的边框和一个令人愉快地位于网站底部的页脚

也许这是业余的做法，但很有效

使用

<div style="position:fixed; bottom:0; height:auto; margin-top:40px;
            width:100%; text-align:center">
  I am footer
</div>


我是页脚
页脚不会向上移动

我使用的一个简单解决方案，来自IE8+

在html上给出最小高度：100%，这样，若内容较少，那个么页面将采用全视图端口高度，页脚将固定在页面底部。当内容增加时，页脚会随着内容向下移动，并一直粘着底部

JS小提琴工作演示：

Css Html
您希望它固定显示在浏览器窗口的底部，还是始终显示在页面的底部，除非滚动才能看到它？是的，我希望人们必须滚动才能看到它。没有将其卡在浏览器窗口的底部。：）最小高度不适用于所有版本的，即固定高度只是略微不可访问。它不适用于IE7和IE8。它适用于IE7和IE8。我自己用的，特别是第二个，它确实有效。也许您缺少某些样式，或者其他样式正在覆盖？@Hristo+已经有1个了！感谢您的努力。@igorsantos07使用解决方案内联更新了我的答案，以及显示其他方法的链接（目前正在使用）这是所有论坛中唯一有效的答案。我尝试过这个方法，但底部是从浏览器窗口的底部测量的，至少在ChromeSimple和works上是这样。竖起大拇指！完美的工作，我想要的！ 
html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>