我不能让这个页脚留在页面的最底部

-1

因此，我正在制作一个网站，无论我做什么，我都无法让我的页脚以我想要的方式行事，我希望它在非常底部的页面（不浮动），所以如果有一个页面充满内容不能看到。我尝试了很多东西，并且四处寻找，但找不到我需要的答案，对不起，如果这是重复的。这是我的CSS代码，以及我的HTML结构。我不能让这个页脚留在页面的最底部

这是我的CSS：

footer { 
bottom: 0; 
height: 10%; 
min-height: 75px; 
left: 0; 
position: absolute; 
width: 100%; 
text-align: center; 
background: #CAA400; 
vertical-align: middle; 
color: #232323; 
}

这是我的HTML（结构）：

<head> 
</head> 
<body> 
    <div> 
    lots of random stuff 
    </div> 
<footer id="foot"><p></p></footer> 
</body>

我使用position: fixed，absolute，relative，很多东西试过，但我似乎无法到想办法。我认为这可能是一个问题，也许在我的CSS中的父容器，但我不知道，任何额外的输入也将是有益的，谢谢。

来源

2016-05-31 Twtheo

谷歌粘页脚 –

可能的复制[你怎么页脚留在底部的网页？]（http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page） – jmoerdyk

由于您没有在标签中添加Javascript，因此我不会发布我的答案。用JS的小菜一碟。 –

好，这里是片段 -

<div id="content"> 
    lots of random stuff<br /> 
    lots of random stuff<br /> 
    lots of random stuff<br /> 
</div> 
<footer id="foot"><p></p></footer>

我已经添加了一个ID为conten吨。然后我使用JS来检测它的高度并根据需要设置页脚的属性top属性。

var top = $('#content').height(); 
if(top > $(window).height()) { 
    $('#foot').css('top', top+'px'); 
}

您的其余CSS保持不变。

这里是样品 -

https://jsfiddle.net/v7tvxcxc/

https://jsfiddle.net/v7tvxcxc/1/

检查这两个小提琴。第一个是内容高度低于窗口高度。第二个恰恰相反。

来源

2016-05-31 20:28:31

我试过这个，它似乎卡住了，当页面第一次加载时，它在底部，当我滚动它时，它最终移动到页面中间。 – Twtheo

@Twtheo你试过自己的结局？在小提琴中它是如你所愿地工作？ –

当你想选择html标签/ s使用document.querySelector（）。因为你已经给它一个id，所以在你的css文件中，你需要通过id来选择元素。如果这没有帮助，请在高度上使用％。现在它的高度也达到了100％，它应该是反应迅速的。

#foot { 
 
bottom: 0; 
 
height: 10%; 
 
min-height: 75px; 
 
left: 0; 
 
position: absolute; 
 
width: 100%; 
 
text-align: center; 
 
background: #CAA400; 
 
vertical-align: middle; 
 
color: #232323; 
 
}

例如：

navbar {height: 10%} 
 
body {height: 80%} 
 
footer {height: 10%}

来源

2016-05-31 20:16:38 DevBear15

如果您可以为标记添加一个间隔符，您可以将主体的最小高度设置为100vh，然后绝对定位页脚。不要忘记你需要position:relative;身体，使一切正常流动！

footer { 
 
bottom: 0; 
 
height: 10%; 
 
min-height: 75px; 
 
left: 0; 
 
position: absolute; 
 
width: 100%; 
 
text-align: center; 
 
background: #CAA400; 
 
vertical-align: middle; 
 
color: #232323; 
 
} 
 
#foot_spacer{ 
 
    height: 10%; 
 
    min-height:75px; 
 
} 
 
body{ 
 
    min-height:100vh; 
 
    box-sizing:border-box; 
 
    position:relative; 
 
    margin:0; 
 
}

<body> 
 
    <div> 
 
    lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff 
 
    </div> 
 
    <div id='foot_spacer'></div> 
 
<footer id="foot"><p></p></footer> 
 
</body>

我还建议调整页脚（和间隔）高度10vh，而不是10％这么一个很长的文章不给你了那座页脚。

它更容易上的jsfiddle大小打得这么试试这里也

小提琴一点：https://jsfiddle.net/trex005/v8rct2ue/

来源

2016-05-31 20:59:49 trex005

我不能让这个页脚留在页面的最底部

回答

相关问题