我的网站页脚不能正常工作，我需要它始终粘在页面底部。将页脚放在底部HTML相对位置

事情我已经尝试：

position:relative：最适合大部分的网页时，除了最小高度小于一定值后，我看到了这个样子，下面的页脚空白。

position:absolute与bottom:0：虽然页脚是永远的底部，但不会打理内容（因为内容为position:relative），它给了我的东西像这样，即页脚不考虑内容高度。

所以在这里，我的问题是：有没有在与position:relative上footer底部总是实现页脚的任何纯CSS方式。

来源

2016-09-27 Nitesh Verma

尝试'现在的位置对其进行管理：绝对的;底部：0px;' –

请分享您的代码 – RasmusGlenvig

您可以给我们的网站？或向我们展示一些代码？因此，easyer可以帮助你 – Fralec

这就是所谓的置顶页脚的方法。试试这个代码，它适用于所有浏览器。在响应网站的情况下，你需要通过断点

html, 
 
body { 
 
    height: 100%; 
 
} 
 
html { 
 
    position: relative; 
 
    min-height: 100%; 
 
    padding-bottom: 50px; 
 
    /* equal to footer height */ 
 
} 
 
header { 
 
    background: #ccc; 
 
} 
 
footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: red; 
 
    height: 50px; 
 
    width: 100%; 
 
}

<header>something</header> 
 
<footer>this will stay at bottom always</footer>

来源

2016-09-27 07:33:13

谢谢男人。几乎没有调整它的工作。 –

它不能在firefox上工作......使用'bottom：0'。有什么建议么。 –

https://gist.github.com/happy2deepak/2e3ad9c8cd5c4abd7dd867c6de3791a7 - 试试这个链接。它也具有所需的Jquery。如果仍然无效，请检查您的代码，可能会丢失一些内容 –

Flexbox的，这应该是你解决这个问题的方法：

的HTML

<body class="Site"> 
    <header>…</header> 
    <main class="Site-content">…</main> 
    <footer>…</footer> 
</body>

的CSS

.Site { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

.Site-content { 
    flex: 1; 
}

来源

2016-09-27 07:26:08 TheFullResolution

将页脚放在底部HTML相对位置

回答

的HTML

的CSS

相关问题