html 更改页脚css的高度

lyfkaqu1  于 2023-10-14  发布在  其他
关注(0)|答案(3)|浏览(120)

问题:我不知道如何在使用reset.css时更改页脚的高度,页脚div的height属性不会更改任何内容。
您可以在本地克隆此文件,然后check it out here
HTML

  1. <div class="wrapper">
  2. <p>Your website content here.</p>
  3. </div>
  4. <div id="footer">
  5. <p>&copy; 2013 Friend | Design and Development. All Rights Reserved.</p>
  6. </div>

CSS - style.css

  1. html, body {
  2. height: 100%;
  3. font-family: 'Arial', Helvetica;
  4. }
  5. .wrapper {
  6. min-height: 100%;
  7. height: auto !important;
  8. height: 100%;
  9. margin: 0 auto -4em;
  10. }
  11. #footer {
  12. background: #444444;
  13. height: 100px;
  14. font-family: 'Open Sans', sans-serif;
  15. color: #FFFFFF;
  16. padding: 20px;
  17. }

RESET.css

  1. /* http://meyerweb.com/eric/tools/css/reset/
  2. v2.0 | 20110126
  3. License: none (public domain)
  4. */
  5. html, body, div, span, applet, object, iframe,
  6. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  7. a, abbr, acronym, address, big, cite, code,
  8. del, dfn, em, img, ins, kbd, q, s, samp,
  9. small, strike, strong, sub, sup, tt, var,
  10. b, u, i, center,
  11. dl, dt, dd, ol, ul, li,
  12. fieldset, form, label, legend,
  13. table, caption, tbody, tfoot, thead, tr, th, td,
  14. article, aside, canvas, details, embed,
  15. figure, figcaption, footer, header, hgroup,
  16. menu, nav, output, ruby, section, summary,
  17. time, mark, audio, video {
  18. margin: 0;
  19. padding: 0;
  20. border: 0;
  21. font-size: 100%;
  22. font: inherit;
  23. vertical-align: baseline;
  24. }
  25. /* HTML5 display-role reset for older browsers */
  26. article, aside, details, figcaption, figure,
  27. footer, header, hgroup, menu, nav, section {
  28. display: block;
  29. }
  30. body {
  31. line-height: 1;
  32. }
  33. ol, ul {
  34. list-style: none;
  35. }
  36. blockquote, q {
  37. quotes: none;
  38. }
  39. blockquote:before, blockquote:after,
  40. q:before, q:after {
  41. content: '';
  42. content: none;
  43. }
  44. table {
  45. border-collapse: collapse;
  46. border-spacing: 0;
  47. }
j13ufse2

j13ufse21#

如果您将.wrapper上的负底部边距与页脚的高度相匹配,则应显示整个页脚。
或者,如果你想要一个浮在页面底部的页脚,你可以这样做:

  1. .wrapper {
  2. min-height: 100%;
  3. position: relative;
  4. }
  5. .content {
  6. /* padding the footer adds 40 to footer height */
  7. padding-bottom: 140px;
  8. }
  9. #footer {
  10. position: absolute;
  11. bottom: 0;
  12. background: #444444;
  13. height: 100px;
  14. font-family: 'Open Sans', sans-serif;
  15. color: #FFFFFF;
  16. padding: 20px;
  17. }
  1. <div class="wrapper">
  2. <div class="content">
  3. <p>Your website content here.</p>
  4. </div>
  5. <div id="footer">
  6. <p>&copy; 2013 Friend | Design and Development. All Rights Reserved.</p>
  7. </div>
  8. </div>

匹配.content填充的高度

展开查看全部
pzfprimi

pzfprimi3#

在Chrome 27中,.wrapper的底部边距限制了#footer的可见高度。当height属性增加时,页脚确实会变高,但是额外的高度(在.wrapper的4em值之外)被隐藏在初始视口高度之外。
因此,它完全按照指定的方式执行:.wrapper占据了viewport的底部4em以外的所有区域,而#footer有自己的高度,与4em无关。

相关问题