Html 更改页脚css的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17386304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change height of footer css
提问by eveo
Problem: I don't know how to change the height of the footer when using reset.css, the height property for the footer div doesn't change anything.
问题：我不知道如何在使用时更改页脚reset.css的高度，页脚 div 的高度属性不会改变任何内容。
You can clone this locally and check it out here
您可以在本地克隆它并在此处查看
HTML
HTML
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div id="footer">
<p>© 2013 Friend | Design and Development. All Rights Reserved.</p>
</div>
CSS - style.css
CSS - style.css
html, body {
height: 100%;
font-family: 'Arial', Helvetica;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer {
background: #444444;
height: 100px;
font-family: 'Open Sans', sans-serif;
color: #FFFFFF;
padding: 20px;
}
RESET.css
重置文件
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
采纳答案by Dom Day
If you match the negative bottom margin on .wrapper to the height of your footer, the entire footer should show.
如果您将 .wrapper 上的负底边距与页脚的高度匹配，则应显示整个页脚。
or, if you're going for a footer that floats at the bottom or the page, you can do this:
或者，如果你想要一个浮动在底部或页面的页脚，你可以这样做：
<div class="wrapper">
<div class="content">
<p>Your website content here.</p>
</div>
<div id="footer">
<p>© 2013 Friend | Design and Development. All Rights Reserved.</p>
</div>
</div>
and in css
并在 css 中
.wrapper {
min-height: 100%;
position: relative;
}
.content {
/* padding the footer adds 40 to footer height */
padding-bottom: 140px;
}
#footer {
position: absolute;
bottom: 0;
background: #444444;
height: 100px;
font-family: 'Open Sans', sans-serif;
color: #FFFFFF;
padding: 20px;
}
matching height to .content padding
匹配高度到 .content 填充
( untested, i'll fiddle it if needed )
（未经测试，如果需要，我会摆弄它）
回答by Nick Zhu
You're missing the d when you're defining the footer
定义页脚时缺少 d
回答by Annika Backstrom
In Chrome 27, the bottom margin on .wrapper is limiting the visible height of #footer. The footer does get taller when the height property is increased, but the extra height (outside the 4em worth of .wrapper) is hidden beyond the initial viewport height.
在 Chrome 27 中，.wrapper 的底部边距限制了 #footer 的可见高度。当 height 属性增加时，页脚确实变高了，但额外的高度（在 .wrapper 的 4em 值之外）隐藏在初始视口高度之外。
So, it's performing exactly as specified: .wrapper takes up all but the bottom 4em of the viewport, and the #footer has its own height unrelated to that 4em.
因此，它完全按照指定的方式执行：.wrapper 占据了视口底部 4em 之外的所有部分，并且 #footer 有自己的高度，与该 4em 无关。
