如何使页脚固定在页面底部

Question

如何使页脚固定在页面底部

15

在我的html中，有一个类名为“footer”的div。我想让它的背景色为#000，并占据整个页面宽度，在它后面没有任何白色空间。

我目前正在使用以下CSS：

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

但是这段CSS代码并没有填满整个页面宽度。

有什么帮助吗？谢谢！

- rodrigoalvesvieira

width:100% 可以吗？另外，您可以使用 margin:0em; 代替设置四个值。 - JCOC611

我忘记的另一个细节是：我希望页面的内容宽度为850像素，页脚占据整个页面宽度。我该怎么做？ - rodrigoalvesvieira

可能是CSS：固定在底部并居中的重复问题。 - ChrisF

9个回答

2

您可以将页脚 div 设为绝对定位，如下所示：

.footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    margin: 0;
    background-color: #000;
    height: 100px;/* or however high you would like */
}

- Jason

2

问题在于页面的内容会流到页脚下面。您需要使用 DIV 来创建页面底部的间隙，以便页脚不会重叠。 - Jared

1

我在网页的每个部分都使用了几个 DIV 元素。

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

每个部分都是相对定位的。使用包装 DIV，我可以设置包装器的特定宽度，其中的元素可以是 100% 宽度。

我建议您避免使用绝对定位和浮动，因为它们会创建兼容性问题，可能无法在所有浏览器上正确显示。

- Jared

0

非常感谢大家提供的支持，每一条回复都在某种程度上帮助了我。最终我得到了这段代码：

.footer {
  height: 59px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  top: 508px;
}

谢谢！

- rodrigoalvesvieira

3

不要写冗余的代码。'padding: 2em 2em;'与'padding: 2em;'意思相同。仅供参考... :) - InanisAtheos

0

您可以在CSS中使用这些样式来实现您的目标

.footer{
   background-color: #000;
   min-width: 100%;
   height: 100px;
   bottom:0;
   position: fixed;
}

如果您正在使用Bootstrap，请尝试使用margin-left: -15px和margin-right：-15px，但在大多数情况下，当您拥有自己的类时，这是不必要的。

- Isaac Shrestha

0

当我使用Bootstrap菜单和固定页脚来创建Web应用程序时，我遇到了这个问题，无论浏览器分辨率如何。

使用以下样式设置页脚元素

内联样式

使用Div中的class属性的外部样式表

  <div class="footer"></div>

style.css

  .footer
  {
   backgroud-color:black;
   position:fixed;
   bottom:0;
   height:2%;
  }

使用Div中的id属性的外部样式表

 <div id="divfooter"></div>

style.css

 #divfooter
 {
  backgroud-color:black;
  position:fixed;
  bottom:0;
  height:2%;
 }

- Kuntady Yathish

0

如果你想让你的页面底部固定不动：

.footer{ position:fixed;}

但是如果你想让页脚固定在页面底部：

看这里

- 8611670474

0

我曾面临同样的问题，并用jquery解决了它。

<body>
    <div id="header" style="background-color: green">This is header</div>
    <div id="main-body" style="background-color: red">This is body</div>
    <div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
    var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
    $('#main-body').css('min-height', main_body_height+'px');
}
</script>

我在这里做的是基于用户屏幕大小的。我会在从中减去页眉和页脚高度后增加主体部分的高度。如果完整的HTML页面高度小于用户屏幕大小，则它将增加主体部分的高度，并自动将页脚移到页面底部。

- Satish51

0

HTML：

<div class="footer">
    <p>
        Some text comes here! &copy; 2015 - 2017
    </p>
</div>

CSS：

.footer {
    width: 100%;
    height: auto;
    text-align: center;
    background: rgb(59, 67, 79);
    position: fixed;
    bottom: 0%;
    margin-top: 50%;
}

* {
    padding: 0;
    margin: 0;
}

- kob

1

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的附加背景会提高其长期价值。 - Donald Duck

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Sobolewski · Accepted Answer

我使用了粘性底部：http://ryanfait.com/sticky-footer/

/*

    Sticky Footer by Ryan Fait
    http://ryanfait.com/

    */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

本质上，包装器高度为100％，具有负边距，底部的高度为负边距，确保页脚始终位于底部而不会导致滚动。

这样可以实现您的目标，即拥有100％宽度的页脚和较窄的正文，因为div是块级元素，默认情况下其宽度为其父元素的100％。请记住，在这里，页脚不包含在包装器div中。