介绍 & lt; body>
& lt; p id=癶eader"祝辞…& lt;/p>
& lt; p id=癱ontent"祝辞…& lt;/p>
类& lt; p=癴ooter"祝辞…& lt;/p>
& lt;/body> html {
高度:100%;
}
身体{
显示:flex;
flex-direction:列;
高度:100%;
}
#标题{/*我们希望头采用固定的高度,只占用必须的空间*//* 0 flex-grow 0 flex-shrink汽车flex-basis */flex: 0 0汽车;
}
#内容{/*将flex-grow设置为1,该元素会占用全部可使用空间
而其他元素该属性值为0,因此不会得到多余的空间*//* 1 flex-grow 0 flex-shrink,汽车flex-basis */flex: 1 0汽车;
}
#页脚{/*和头一样,页脚也采用固定高度*//* 0 flex-grow 0 flex-shrink汽车flex-basis */flex: 0 0汽车;
} <李>
这篇文章将为大家详细讲解有关CSS3中如何实现PC端无论页面有没有完全撑开把页脚保持在最底部的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
解决该问题的最好方法是采用CSS3提供的一种先进布局模型:flexbox,可以建立具有适应性的布局。
下面我们代码走起来
我们利用flex-deraction:列将页面结构竖向排列,(flex默认是横向排列的),同时,将html和体元素的高度设置为100%,使其充满整个屏幕。
上面用到了flex包含的3个属性,我来介绍一下他们的用途:
flex-grow:元素在同一容器中对可分配空间的分配比率,及扩展比率
<李>flex-shrink:如果空间不足,元素的收缩比率
<李>flex-basis:元素的伸缩基准值
也就是页眉和页脚只占用他们应该占用的空间,将剩余的空间全部交给主体内容区域
好啦,到这里,无论页面内容是多是少,都可以保证页脚乖乖的待在底部了。
关于CSS3中如何实现PC端无论页面有没有完全撑开把页脚保持在最底部的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
