Html 将页脚保持在底部（css）_Html_Css

Html 将页脚保持在底部（css）

html css

Html 将页脚保持在底部（css）,html,css,Html,Css,这似乎是一个很受欢迎的问题，但即使加入了一些建议，我也没有得到预期的结果我有一个页脚，我希望它在页面底部。以下是我的HTML和CSS：（hi'只是占位符内容） HTML: 现在如果我有位置：绝对在.footer样式中，则页脚在页面加载时位于底部，向下滚动时保持在相同的精确位置。从小提琴上可以看出，它也与内容重叠如果我删除position:absolute属性，那么页脚就不在页面底部，而是直接位于前一个元素的下方。看这里来理解我的意思我希望它在这一页的底部。如果页脚上有最小的内容，那么它应

这似乎是一个很受欢迎的问题，但即使加入了一些建议，我也没有得到预期的结果

我有一个页脚，我希望它在页面底部。以下是我的HTML和CSS：（hi'只是占位符内容）

HTML:

现在如果我有

位置：绝对

在

.footer

样式中，则页脚在页面加载时位于底部，向下滚动时保持在相同的精确位置。从小提琴上可以看出，它也与内容重叠

如果我删除

position:absolute

属性，那么页脚就不在页面底部，而是直接位于前一个元素的下方。看这里来理解我的意思

我希望它在这一页的底部。如果页脚上有最小的内容，那么它应该一直到底部，如果页脚前有很多内容，那么它不应该重叠在所有内容下面。jQuery解决方案也不错。

更新URCSS如下

检查jsbin中的输出

.footer{
位置：相对位置；
顶部：225px；
}
身体{
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
身高：100%；
最小高度：100%；
}


JS-Bin

嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨

更新您的css，如下所示

检查jsbin中的输出

.footer{
位置：相对位置；
顶部：225px；
}
身体{
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
身高：100%；
最小高度：100%；
}


JS-Bin

嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨

我有更新代码检查这个

CSS

HTML



嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨

我有更新代码检查这个

CSS

HTML



嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨
嗨

看看克里斯·布拉科的精彩代码笔，它会解决你的问题

/**
*演示样式
*/
html{
身高：100%；
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
身体{
位置：相对位置；
保证金：0；
垫底：6rem；
最小高度：100%；
字体系列：“Helvetica Neue”，Arial，无衬线；
}
.演示{
保证金：0自动；
填充顶部：64px；
最大宽度：640px；
宽度：94%；
}
.演示h1{
边际上限：0；
}
/**
*页脚样式
*/
.页脚{
位置：绝对位置；
右：0；
底部：0；
左：0；
填充：1rem；
背景色：#EFEF；
文本对齐：居中；
}


CSS“始终在底部”页脚
我经常发现自己在设计一个网站时，页脚必须放在页面底部，即使上面的内容太短，无法自然地将其推到视口底部
但是，如果内容比用户的视口高，则页脚应该像正常情况一样从视图中消失，位于页面底部（不固定到视口）
如果您知道页脚的高度，那么应该显式地设置它，并将页脚父元素的底部填充设置为相同的值（如果需要一些间距，则设置为更大）
这是为了防止页脚与上面的内容重叠，因为页脚是通过位置：绝对从文档流中删除的
此页脚将始终位于页面底部，但未固定
查看Chris Bracco的精彩代码笔，它将解决您的问题

/**
*演示样式
*/
html{
身高：100%；
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
身体{
位置：相对位置；
保证金：0；
垫底：6rem；
最小高度：100%；
字体系列：“Helvetica Neue”，Arial，无衬线；
}
.演示{
保证金：0自动；
填充顶部：64px；
最大宽度：640px；
宽度：94%；
}
.演示h1{
边际上限：0；
}
/**
*页脚样式
*/
.页脚{
位置：绝对位置；
右：0；
底部：0；
左：0；
填充：1rem；
背景色：#EFEF；
文本对齐：居中；
}

CSS“始终在底部”页脚
我经常发现自己在设计一个网站时，页脚必须放在页面底部，即使上面的内容太短，无法自然地将其推到视口底部
但是，如果内容比用户的视口高，则页脚应该像正常情况一样从视图中消失，位于页面底部（不固定到视口）
如果您知道页脚的高度，那么应该显式地设置它，并将页脚父元素的底部填充设置为相同的值（如果需要，可以设置更大的值）
<body>
<ul>
  <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>

</ul>

<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>

</body>

.footer {
bottom:0;
 position: absolute;
 width:100%;  

}

body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;

}

.footer {
    position:relative;
    top:225px;



}

.footer {
    bottom:0;
    position: fixed;
    width:100%;  
    margin-bottom: 0 !important;
}
.content {
    position: relative;
}
body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;
}

<div class="content">
<ul>
  <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>

</ul>
<div>
<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>
</div>

.footer {
    position:fixed;
    bottom:0px;
    width:100%;
}
.footer.navbar {
    margin-bottom:0px;
}

body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;
    padding-bottom:120px; // whatever size you need
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<ul>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
</ul>

<div class="spacer"></div>

<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>

</body>
</html>

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.spacer{
  flex:1;
}