创新路
我们一直在努力

CSS3 calc()函数快速实现页脚置底

页脚(footer)的版权信息,我们通常都是希望置底放置的。但如果网页主体内容(content)不够长,那么通常页脚会出现在中间的位置,看起来不好看。

需求:让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部。

解决方案:给主体内容(content)加一个根据浏览器容器自适应的最小高度(min-height),之前达到这个目的有点复杂,不过现在简单了。不需要任何多余元素——使用CSS3新增的计算函数calc()即可。

CSS部分,其中100vh,是采用的相对长度单位,即高度为100%视窗高度。减去的50px是给footer留空间,高度根据实际情况设置即可。

.content {

    width:1100px;

    margin-left:auto;

    margin-right:auto;

    min-height:calc(100vh – 50px);

    border:1px solid #F00;

}

.footer {

    height:50px;

    background-color:#CCC;

}

HTML部分

<div class="content">

    <p>content </p>

</div>

<footer class="footer"></footer>

定义与用法

calc() 函数用于动态计算长度值。

需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% – 10px);

任何长度值都可以使用calc()函数进行计算;

calc()函数支持 "+", "-", "*", "/" 运算;

calc()函数使用标准的数学运算优先级规则;

未经允许不得转载:天府数据港官方信息博客 » CSS3 calc()函数快速实现页脚置底

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机