如何将页脚扩展到页底?
[英]how can i extend a footer to bottom of page?
i have a layout like this
我有这样的布局
<section id="container">
<header></header>
<section id="main"></section>
<footer></footer>
</section>
At the moment my page is laid out like this:
此刻，我的页面如下所示:
-------------------
| | 100px height
| HEADER |
|-----------------|
| |
| MAIN | 500px height
| |
|-----------------|
| |
| FOOTER |
|-----------------|
| |
| |
-------------------
I would like the footer to extend following the main content area to the bottom of the page, how can this be achieved?
我希望页脚扩展到页面底部的主要内容区域，这是如何实现的?
-------------------
| | 100px height
| HEADER |
|-----------------|
| |
| MAIN | 500px height
| |
|-----------------|
| |
| FOOTER |
| |
| |
| FOOTER |
-------------------
NOTE: I have noticed all answers so far will pin the footer to tje bottom of the page, however when dragged the footer simply moves down/the main container expands, I want the footer to expand.
注意:到目前为止，我已经注意到所有的答案都将页脚固定在页面的tje底部，但是当拖拽页脚时，只需向下移动/主容器展开，我希望页脚展开。
8 个解决方案
#1
112
I was searching for a solution to this exact problem, and I came across a very simple way of achieving the effect I was going for:
我正在寻找这个问题的解决方案，我发现了一种非常简单的方法来达到我想要的效果:
footer {
box-shadow: 0 50vh 0 50vh #000;
}
This creates a shadow which will fall off the screen if not needed, but otherwise will give 100vh (a full viewport height's worth) of coverage to the space below the footer, so the body background doesn't appear below it.
这将创建一个阴影，如果不需要的话，它将从屏幕上掉下来，但是如果不需要的话，它将为页脚下面的空间提供100vh(一个完整的视图高度)的覆盖，因此body background不会出现在页脚下面。
#2
6
I would create the illusion that the footer extends to the bottom if possible.
如果可能的话，我将创建一个页脚延伸到底部的错觉。
Say footer background color is #000000;
输入页脚背景颜色为#000000;
Set the body background color to #000000
设置背景颜色为#000000。
and make sure
并确保
spans 100% width.
跨越宽度的100%。
the color #00000 is for example purposes only you may need an image slice or the lat color used in a gradient etc...
例如，颜色#00000仅用于您可能需要一个图像切片或在渐变中使用的lat颜色等。
#3
6
Although this is marked answered, it doesn't seem to fully answer the OPs question. I had the same challenge and here is what I found to work:
虽然这被标记为已回答，但它似乎没有完全回答项目事务厅的问题。我遇到了同样的挑战，以下是我的发现:
- Set your HTML & Body to 100% height
- 将你的HTML和正文设置为100%的高度
- Ensure all of your content, including your footer is wrapped with a big div (site-container)
- 确保你所有的内容，包括你的页脚被一个大的div (site-container)包裹
- Fiddle with the space in the footer.
- 修改页脚的空间。
Here is the CSS:
CSS:
html, body{
height: 100%
}
.site-container{
overflow: hidden;
min-height: 100%;
min-width: 960px;
}
.footer{
padding-bottom: 32000px;
margin-bottom: -32000px;
}
I found this here: https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/ which contains more info.
我在这里找到了这个:https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your sites-footer-to- bottom- the-bottom-of- page/其中包含了更多的信息。
#5
2
You can use a sticky footer to achieve that effect, like the one listed here, and apply it to your design to push your footer to the bottom of the document, like in this demo i put up:
你可以使用一个粘性的页脚来实现这个效果，就像这里列出的那样，并将它应用到你的设计中，将页脚推到文档的底部，就像我在这个演示中展示的那样:
演示、编辑。
#6
1
Try the below fiddle which is demonstrating the concept how to keep the footer at bottom always.
试试下面的小提琴，它演示了如何始终将页脚放在底部的概念。
Fiddle: http://jsfiddle.net/evTb4/
小提琴:http://jsfiddle.net/evTb4/
Demo: http://jsfiddle.net/evTb4/embedded/result/
演示:http://jsfiddle.net/evTb4/embedded/result/
#7
1
I had the same problem and found this to work - so long as the footer is out on its own, i.e. not within a container div or anything.
我也遇到了同样的问题，并发现这个方法是有效的——只要页脚是独立的，即不在容器div或任何东西中。
Basically, I needed my content to be fixed width and centred on a white background with a horizontally repeating background image in the body tag extending the full width of the browser window, providing a nice band beneath the header. I wanted the footer to be in a dark colour and extend to the bottom of the page regardless of the height of the content and browser window size.
基本上，我需要我的内容保持固定的宽度，以一个白色背景为中心，主体标记中有一个水平重复的背景图像，扩展了浏览器窗口的整个宽度，在标题下提供了一个漂亮的条带。我希望页脚是深色的，无论内容的高度和浏览器窗口的大小，都要延伸到页面的底部。
My page (very simply) was as follows:
我的页面(非常简单)如下:
<!DOCTYPE HTML>
<html>
<head>usual stuff</head>
<body>
<div id="container">
<header>fixed height and containing various stuff</header>
<div id="sidebar">floated left and containing nav</div>
<div id="content">floated left and containing various stuff</div>
<div class="clearfloat"></div>
<!-- end container --></div>
<footer>various stuff, address etc.</footer>
</body>
</html>
Then in the css include these rules (along with all the other styles):
然后在css中包括这些规则(以及所有其他样式):
html, body {
height: 100%;
overflow: hidden;
}
footer {
height: 100%;
}
The hidden overflow removed the annoying scrollbar caused by the 100% html and body height compensating for the height of the container and extending beyond the browser window.
隐藏的溢出删除了由100% html和身体高度对容器的高度进行补偿的恼人的滚动条，并扩展到浏览器窗口之外。
#8
0
Similar to @c4collins, you can use view height instead of a fixed pixel, in case someone has a huge monitor
类似于@c4collins，你可以使用视图高度而不是一个固定的像素，以防有人有一个巨大的显示器
footer{
box-shadow: 0 100vh 0 100vh #000000;
}
注意！
本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2012/03/16/77bdbe1691bb5fcef10daf5d6f6368d4.html。