css中div固定在底部

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中可以用position属性来实现让一个div固定在底部的效果。首先需要在HTML中设置一个包含内容的父容器,比如一个body或者一个具有固定高度的容器。然后在父容器中设置position为re

CSS中可以用position属性来实现让一个div固定在底部的效果。

首先需要在HTML中设置一个包含内容的父容器,比如一个body或者一个具有固定高度的容器。然后在父容器中设置position为relative,这样子元素的position设置就是相对父容器的。

 body {
        position: relative;
        height: 1000px;
    } 

接下来在子元素中设置position为absolute,并且设置bottom为0,这样子元素就会固定在父容器的底部。

 .footer {
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        background-color: #ccc;
    } 

上面是一个简单的例子,.footer就会被固定在父容器的底部。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中div固定在底部

粉丝

0

关注

0

收藏

0

已有0次打赏