Question

嗨，我知道有很多关于同一件事的问题，我已经尝试了这些答案，但没有一个有效。所以我走了，用了min-height：1000px;在我的网站的主体上，所以使所有的页面大小相同，但这样做后，我的页脚大了很多时间，页脚现在在页面的中间，不再是页面的整个宽度，它就在页面的左侧，

HTML

<footer>
&copy; Digital Canvas Web Designs est 2012
</footer>
</div> <!--wrapper-->

和CSS

footer {
position:absolute;
width:auto;
bottom:0;
height:20px;
padding-bottom:20px;
border-top-color: #990012;
border-top-width:2px;
border-top-style:solid;
text-align:center;
font-family:georgia, serif;
font-style:italic;
font-size:0.75em;
}

我希望边框一直穿过页面底部。有任何想法吗？干杯

Answer 1

尝试将宽度定义为100％

footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:20px;
    padding-bottom:20px;
    border-top-color: #990012;
    border-top-width:2px;
    border-top-style:solid;
    text-align:center;
    font-family:georgia, serif;
    font-style:italic;
    font-size:0.75em;
}

Answer 2

编辑。尝试位置：相对于#wrapper和position：absolute;底部：0;到页脚。

Answer 3

我认为这就是你要找的东西：http://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/（如果你愿意的话，文章末尾有一个编写代码）

如果您需要翻译，我会帮忙。

Answer 4

列出了一些解决页脚问题的技巧： https://css-tricks.com/couple-takes-sticky-footer/

最适合我的那个是：

HTML：

<body>
  <div id="main-container">

      content

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

CSS：

html, body {
  height: 100%;
  margin: 0;
}

#main-container {
  min-height: 100%;
}

Answer 5

尝试将位置更改为亲戚。

.wrapper{
position :absolute;
}

footer {
position:relative;
}

页脚没有停留在底部

5 个答案: