css实现粘性页脚底部粘性布局的三种方式

#app{width:100%;高度：100vh；.content{宽度：100%；最小高度：100%；位置：相对；/*子元素的相对定位会覆盖父元素底部的一部分。并且因为框模型默认是content-box，所以我们启用border-box框模型，同时添加一个bottompadding。这样，内容就会被挤压，底部的padding空间可以留给底部的按钮。放置。当然，别忘了使用定位*/box-sizing:border-box;填充底部：40px；.btns{宽度：100%；高度：40px；行高：40px；背景色：#ced；位置：绝对；底部：0；}}}问题描述什么是粘性页脚布局比如网页中有一篇文章，文章可以长也可以短，如果文章较长，则在文章的最后，放置一个赞按钮。如果文章很短，请在页面底部放置一个赞按钮。大致效果图如下：贴底布局文章短时：文章长时：实现方法一（定位布局）观察网页骨架，大致分为两部分，一部分是文章的内容，另一部分是底部的按钮，我们可以在内容区把文章的内容和底部的按钮放在一个盒子里，盒子的最小高度设置为100vh.按钮组固定定位在框的底部，子元素的相对定位会覆盖父元素底部的一部分。并且由于盒模型默认为content-box，我们启用border-box盒模型并在底部添加一个padding。这样，内容就会被挤压，底部的padding空间可以留给底部的按钮。放置。vh是相对长度单位，对应vw，是相对于网页的高和宽。即网页被分成100份。100vh是整个屏幕的高度。代码如下：#app{width:100%;高度：100vh；.content{宽度：100%；最小高度：100%；位置：相对；/*子元素的相对定位会覆盖父元素底部的一部分。并且因为框模型默认是content-box，所以我们启用border-box框模型，同时添加一个bottompadding。这样，内容就会被挤压，底部的padding空间可以留给底部的按钮。放置。当然，别忘了使用定位*/box-sizing:border-box;填充底部：40px；.btns{宽度：100%；高度：40px；行高：40px；背景色：#ced；位置：绝对；底部：0；}}}方法二（使用calc()计算布局）这种方法CSS代码会少一点，也不错。在结构上，内容区域的框和带按钮的框应该并排放置。有按钮的框要设置固定高度，比如50px，有内容区域的框要设置calc（100vh-50px）的计算方式，也会自适应。代码如下：#app{width:100%;高度：100vh；/*并排放置，一个盒子有固定高度，另一个盒子计算高度*/.content{width:100%;最小高度：计算（100vh-50px）；}.btns{宽度：100%；高度：50px；行高：50px；背景色：#ced；}}方法三（灵活的Box布局）该方法的结构与上一个方法的结构一致。启用弹性框后，默认水平布局。我们修改flexbox的方向，将其更改为垂直布局。包含按钮的框的高度是固定的，包含内容的框设置为flex:1；让它自由生长，剩下的内容会被填满，也能达到这种粘性布局的效果。代码如下：