上中下布局【不满一屏，footer固定在底部，满一屏，footer随页面滚动】

最新推荐文章于 2022-11-14 20:37:24 发布

朦dada

最新推荐文章于 2022-11-14 20:37:24 发布

阅读量785

点赞数 2

分类专栏： HTML+CSS 文章标签： css

本文链接：https://blog.csdn.net/mengStudents/article/details/105330175

版权

HTML+CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

【要求】

上中下布局：当页面高度不满一屏的时候，footer固定在页面的底部；当页面高度满一屏的时候，footer随着页面内容滚动。

【code实现-普通布局方式】

// html结构
<body>
    <div class='header'></div>
    <div class='content'></div>
    <div class='footer></div>
</body>
// css实现
/*
 * 关键点在于：中间内容的padding-bottom值与footer的height值和margin-top的值一致
 */
body {
    height: 100%;
}

.header {
    height: 60px;
}
.content {
    min-height: calc(100% - 60px);
    box-sizing: border-box;
    padding-bottom: 60px;
}
.footer {
    height: 60px;
    margin-top: -60px;
}

【code实现-flex布局】

// html布局
<body>
    <div class='header'></div>
    <div class='content'></div>
    <div class='footer></div>
</body>
// css实现
/*
 * 利用flex:1;占据页面剩余高度值的特性实现
 */
body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.head {
    width: 100vw;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #aff;
}
.content {
    flex: 1;
    text-align: center;
    background-color: #ffa;
}
.footer {
    width: 100vw;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #faa;
}

朦dada

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
上中下布局【不满一屏，footer固定在底部，满一屏，footer随页面滚动】

【要求】上中下布局：当页面高度不满一屏的时候，footer固定在页面的底部；当页面高度满一屏的时候，footer随着页面内容滚动。【code实现-普通布局方式】// html结构<body> <div class='header'></div> <div class='content'></div> &...
复制链接

扫一扫