发表于： 2018-06-06 21:06:15
2 586
今天完成的事情：
今天上午的时候把任务七的页面的下面的固定写了一下，用了一个新的属性
明天计划的事情：
先写一下下一个页面，整理一下小课堂。
遇到的问题：
还没有遇到问题，就是我的已经用了隐藏图标，但是还是没有显示用了
我这样写应该可以吧？但是没有效果。
收获；
前两个还好后面的一个我看不懂
方法一：footer高度固定+绝对定位
方法二：footer高度固定+margin负值
方法三：footer高度任意+js
还有下边总结的5种方法，虽然没有去写但是我的也实现了。
重点用红色写出来了
- <html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；
- div#container容器：div#container 容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度，不过在IE6是不支持 min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，或者阅读Min-Height Fast Hack了解如何解决min-height在Ie6下的bug问题。另外我们还需要在div#container容器中设置一个"position:relative"以便于里面的元素进行绝对定位后不会跑了div#container容器；
- div#page容器：div#page 这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度 （height）值，当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要 注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果；
- div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个"width:100%"，让他在整个页面上得到延伸；
- 其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。
返回列表
评论