首页 > html > faq > 17.html页脚置于底部

17.html页脚置于底部

网页中经常会有内容不足一屏的情况,这时页脚如果不做特殊处理的话,会跟随内容,移动到屏幕中部位置.这样效果不美观.我们需要简单的设置一下就可以让页脚在底部.

1 css页脚固定在页面底部

在页面内容不足一屏的时候页脚固定在页面底部需要设置3个地方。解决这个问题的思路是将网页高度设置为100%,页面底部预留出页脚显示区域.将一个div最小高度设置为100%来撑大显示区域.这时页脚就会在网页页面底部预留的区域显示.

1.1 css设置整个页面的高度为100%

/*大屎蛋教程网 http://dashidan.com*/
html {
    height: 100%;
}

1.2 css设置body区域min-height为100%

body {
    min-height: 100%;
    /*页脚预留高度,为页脚占位 */
    padding-bottom: 80px;
}

1.3 css设置页脚区域占位

通过padding-bottom属性设置距离底边高度, 这个区域作为页脚的区域,为页脚占位.

body {
    /* 页脚预留高度,为页脚占位-大屎蛋教程网*/
    padding-bottom: 80px;
}

1.4 css设置全屏区域

我们需要设置一个全屏的区域来将一个div撑大到全屏.我们将这个区域的样式设置为fullscreen.设置这个div的overflow-y属性.overflow-y属性很重要, 可以撑大内容显示区, 如果不设置这个显示不正常

.fullscreen {
    min-height: 100%;
    overflow-y: hidden;
}

2 css页脚固定在页面底部示例代码

设置页脚固定在页面底部示例代码:

html {
    height: 100%;
}

body {
    min-height: 100%;
    /* 页脚预留高度,为页脚占位-大屎蛋教程网*/
    padding-bottom: 80px;
    /** overflow-y属性很重要, 可以撑大内容显示区, 如果不设置这个显示不正常*/
    overflow-y: hidden;
}

.fullscreen {
    min-height: 100%;
    /** overflow-y属性很重要, 可以撑大内容显示区, 如果不设置这个显示不正常*/
    overflow-y: hidden;
}
转载请保留原文链接.