怎么利用CSS使footer固定在页面底部

2. CSS样式

CSS Code复制内容到剪贴板

1.   

2.   

3.         *{   

4.   

5.             margin: 0;/* 把默认值都设为0 */  

6.   

7.         }   

8.   

9.         html, body   

10.   

11.         {   

12.   

13.             height: 100%;   

14.   

15.             width:85%;   

16.   

17.             margin:0auto;/* 居中 */  

18.   

19.         }   

20.   

21.            

22.   

23.         .header   

24.   

25.         {   

26.   

27.             height:100px;   

28.   

29.             background-color:Fuchsia;   

30.   

31.         }   

32.   

33.            

34.   

35.         .wrapper   

36.   

37.         {   

38.   

39.             min-height: 100%;/* IE6 hack*/  

40.   

41.             height: auto!important;/* height优先级 */  

42.   

43.             height: 100%;   

44.   

45.             margin: 0auto-4em;/* 负值必须等于footer的高度 */  

46.   

47.         }   

48.   

49.            

50.   

51.         .content  

52.   

53.         {   

54.   

55.             background-color:Silver;   

56.   

57.         }   

58.   

59.            

60.   

61.         .clear/* 清除浮动 */  

62.   

63.         {   

64.   

65.             height: 4em; /* clear的height必须和footer的值样高 */  

66.   

67.             clear:both;   

68.   

69.         }   

70.   

71.            

72.   

73.         .footer   

74.   

75.         {   

76.   

77.             height: 4em;   

78.   

79.             background-color:Aqua;   

80.   

81.         }   

82.   

83.        

到此，关于“怎么利用CSS使footer固定在页面底部”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！