我知道这个问题已被问过大约1000次，但这一次有所不同 转到此链接通过点击此处查看它直播并点击标题添加内容可能20,30次，内容将低于页脚我想要的是让我的页脚到页面底部并且不会超过内容 这里的代码如果链接不起作用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Footer</title> </head> <body> <div id="wrapper"> <div id="header"></div> <div style="width:100%;height:50px;"></div> <div id="options"></div> <div id="content"> </div> <div id="footer"></div> </div> </body> </html>CSS
html,body{ height: 100%; margin: 0; } #wrapper{ position: relative; min-height: 100%; } #header{ width: 100%; height: 50px; background: #1a73f8; position: fixed; } #options{ width: 270px; height: 410px; background: white; border: 1px solid #e3e3e3; position: fixed; } #content{ width: 1000px; margin-left: 290px; border: 1px solid #e3e3e3; box-shadow: .2px .2px 1px 1px #e3e3e3; margin-top: 20px; } #footer{ width: 100%; height: 140px; background: #1a73f8; color: white; position: absolute; bottom: 0; }I've set up a position absolute footer but it covers the content as more content is added.
I want it to be at the bottom of the page even if there is not enough content to push it down
Live Code
<div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div>CSS
#wrapper{ position: relative; min-height: 100%; } #content{ width: 900px; margin-top: 20px; } #footer{ width: 100%; height: 140px; position: absolute; bottom: 0; }最满意答案
我不是肯定的，这正是你正在寻找的，但希望这会有所帮助。 如果您希望页脚始终位于每个页面的底部，无论是否有足够的内容将其推下，您需要人们称之为“粘性”页脚。 您可能会在Google上找到一些不同的方法，但这就是我所做的，尽管它要求您知道页脚div的高度。
首先从你的包装器中取出你的页脚div，然后将div放在与#wrapper相关的结束div标签之后。 然后添加padding-bottom：140px; 箱尺寸：边界盒; 到你的CSS中的#wrapper。 请注意，它与页脚的高度相同，这很重要！ box-sizing将告诉你的包装器div，填充不应该被添加到100％的高度，而是被带走。 除非您确实有足够的内容需要它们，否则这将确保您不会获得任何滚动条。
二，拿走职位：绝对; 底部：0; 明确：两者; 来自#footer，你不应该再需要这些了。 然后添加margin-top：-140px;
最后，确保你的css中有这些：body {height：100％} html {height：100％}
希望这对您有用，它应该做的是保证页脚和您的内容不会重叠，并确保您的页脚始终从页面底部开始（除非您有更多内容将其推向更远）。
I'm not positive this is exactly what you are looking for but hopefully this helps. If you want your footer to always be at the bottom of each page, whether there is enough content to push it down or not, you need what people call a "sticky" footer. You could probably find a few different ways to do it on Google but this is what I do, although it requires that you know the height of your footer div.
First take your footer div out of your wrapper, just put the div after your ending div tag that correlates for #wrapper. Then add padding-bottom:140px; box-sizing:border-box; to #wrapper in your css. Note that it is the same height as your footer, this is important! The box-sizing will tell your wrapper div that the padding should not be added to the 100% height, but instead taken away. This will make sure you don't get any scrollbars unless you actually have enough content to need them.
Second, take away position:absolute; bottom:0; clear:both; from #footer, you shouldn't need these anymore. Then add margin-top:-140px;
lastly, make sure you have these in your css: body{ height:100% } html{ height:100% }
Hopefully this works for you, what it should do is guarantee no overlap from the footer and your content, as well as make sure your footer always starts at the bottom of the page (unless you have more content to push it even further down).
更多推荐
发布评论