CSS位置固定底部页脚

-1

我正在尝试将页脚固定在底部，尽管我在页面上的位置。我试过CSS位置固定底部页脚

.home-footer{ 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    z-index: 5; 
}

但它只适用于我将脚注放在身体外并将它放置在html元素下方的位置。我如何在保持身体健康的同时做到这一点？

编辑我发现问题是我的身体有transform: translateX(0)。这似乎与固定页脚冲突，因为一旦我摆脱了这一点，它就起作用了。但是，我需要这个规则，否则我的导航幻灯片会中断。

来源

2016-07-27 Jordan Carter

我们需要查看HTML和CSS的其余部分，以便说明问题所在。 –

添加到您的CSS：

html, body { 
    width: 100%; 
    height: 100%; 
}

来源

2016-07-27 14:17:58

最初将它推到底部，但当我向下滚动时，它不会随页面一起滚动。 –

我认为答案在这里 - > http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom –

试试这个：

HTML：

<body> 
    <div class="container"> 
    <footer>Your footer</footer> 
    </div> 
</body>

CSS：

// wrapper in your body, where your footer will be in 
.container { 
    position: absolute; 
    top: 30px; 
} 

footer { 
    position: relative; 
    bottom: 0; 
    width: 100%; 
    height: 20px; 
}

来源

2016-07-27 14:20:04

这不是我正在寻找的东西对于。我希望CSS始终在屏幕上可见，但底部。所以，它会在我们滚动页面时移动。 –

我更新了我的问题。基本上这是一个转换在身体上的问题，这似乎与固定位置的页脚发生冲突。 –

我发现问题是将变换应用于身体并具有固定页脚之间的冲突。似乎有一个问题将这两条规则结合在一起。我使用了左侧定位来制作动画，而不是转换，并解决了问题。这不是理想的，但它的工作。

来源

2016-07-27 15:49:53

CSS位置固定底部页脚

回答

相关问题