最完美的底部CSS布局: Sticky footers

柔情只为你懂 2022-04-22 23:24 125阅读 0赞

## ##

### html结构： ###

<div class="container">
        <div class="content-wrapper>
           <div class="content">内容区域，可随机长度</div>
        </div>
        <div class="close">
    <div>
    <div class ="close">关闭图标</div>始终再底部.

### css代码： ###

.container{//总容器为全屏，所以高度为100％
      positon: fiexd;
      top:0;
      left:0;
      height:100%;
      overflow: auto;//如果内容太长，会显示滚动条查看其余内容。
     }
    .content-wrapper{
      min-height: 100%;//如果内容不够长时，也保证内容有全屏长度
    }
    .content{
      margin-top: 50px;//向上和屏幕顶部保持50px间距
      padding-bottom: 50px;//保证内容content区域的底部有50px的空白
    }
    .close{
       margin: -64px;//让关闭按钮向content－wrapper里面伸入50px，正好把内容区的50px空白补上；
    }

最终实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueWFvcWk_size_16_color_FFFFFF_t_70][]

原文地址：[https://blog.csdn.net/github\_38861674/article/details/76541300][https_blog.csdn.net_github_38861674_article_details_76541300]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueWFvcWk_size_16_color_FFFFFF_t_70]: /images/20220326/da024e22467146878098a7cd5b0f92c7.png
[https_blog.csdn.net_github_38861674_article_details_76541300]: https://blog.csdn.net/github_38861674/article/details/76541300

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关使用css弹性布局，让页面footer底部固定

在前端开发过的工作中，footer永远固定在底部的需求。也就是说一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内

电玩女神/ 2022年12月22日 04:37/ 0 赞/ 53 阅读

相关 Sticky Footer , fixed footer, pinned footer

1. through css > \footer \{ > > position:fixed; > > left:0px; > > botto

女爷i/ 2022年12月20日 01:50/ 0 赞/ 73 阅读

相关一道经典的css面试题。固定底部（sticky footer）

在我们的日常开发当中，经常会遇到要固定底部，内容偏多的时候会自动往下撑开的设计稿。这样的要求移动端频率偏多！看下面的设计稿，我是从某外卖APP上面截图的。敏感信息已经打马。

川长思鸟来/ 2022年07月12日 08:53/ 0 赞/ 112 阅读

相关 Sticky Footer 让页脚紧贴页面底部

功能效果：当页面内容不超过当前屏幕高度时，页脚在屏幕的底部；当页面内容过多超过当前屏幕高度时，页脚在内容后面。图片效果演示：当页面内容不超过当前屏幕高度时： ![

一时失言乱红尘/ 2022年07月12日 08:52/ 0 赞/ 194 阅读

相关 css揭秘 -- Sticky footers解决方案

最近在读《CSS Secrets》，结合网上的许多文章写了笔记，希望大家都能有所收获 > 注：《CSS Secrets》是 Lea Verou最新著作，这本书讲解了有关于CS

快来打我*/ 2022年05月29日 05:53/ 0 赞/ 120 阅读

相关最完美的底部CSS布局: Sticky footers

html结构： <div class="container"> <div class="content-wrapper>

柔情只为你懂/ 2022年04月22日 23:24/ 0 赞/ 126 阅读

相关 Sticky footer

Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部

àì夳堔傛蜴生んèń/ 2022年03月16日 06:48/ 0 赞/ 139 阅读

相关通过flex布局时footer始终在页面底部

在页面布局时通常会遇到这样一个问题，页面内容太少时无法将内容区域撑开，从而使得footer下方有留白，使用flex布局可以很简单的解绝这一问题。 html代码如下：

男娘i/ 2021年12月17日 10:21/ 0 赞/ 407 阅读

相关 css宽高自适应布局，实现Sticky Footer的三种布局方式

宽度自适应布局： 1、使用场景：一侧（左侧或者右侧）为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于

太过爱你忘了你带给我的痛/ 2021年09月19日 00:50/ 0 赞/ 485 阅读

相关 Sticky footers 经典布局（兼容性最好的一种布局方式）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

约定不等于承诺〃/ 2021年09月14日 13:28/ 0 赞/ 212 阅读