css sticky footer布局+流式布局

本文主要是介绍css sticky footer布局+流式布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考地址：张鑫旭老师-css sticky footer布局
结合项目具体场景给出介绍：点击信息，弹出浮层，显示详细信息。浮层最下面有个关闭按钮，一直处在底部，当内容未撑开一页大小时，关闭按钮处在页面最底端。当内容撑开超出一页的大小时，底部内容向下推送。

方法一：min-height+ padding-bottom + margin-top

布局核心框架：
核心：三部分detail-wrapper,detail-main,detail-close

<div v-show="detailShow" class="detail"><div class="detail-wrapper clearfix"><div class="detail-main"><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p><p>{{seller.bulletin}}</p></div></div><div class="detail-close"><i class="icon-close"></i></div></div>.detailposition: fixedz-index: 100top: 0left: 0width: 100%height: 100%overflow: autobackground: rgba(7,17,27,0.8).detail-wrappermin-height: 100% ！！！.detail-mainmargin-top: 64pxpadding-bottom: 64px ！！！.detail-closeposition: relative width: 32pxheight: 32pxmargin: -64px auto 0 auto ！！！设置负值，向上平移，否则在屏幕之下，看不到clear: both.icon-closefont-size: 32px

.clearfixdisplay: inline-block&::afterdisplay: blockheight: 0line-height: 0content:"."clear: bothvisibility: hidden

方法二：flex

<body class="Site"><header>...</header><main class="Site-content">...</main><footer>...</footer>
</body

.Site {display: flex;min-height: 100vh;flex-direction: column;
}.Site-content {flex: 1;
}

不错的链接总结：
基本汇总-html、css布局、js

流式布局

这里写图片描述

方法一：flex + flex-wrap + align-items

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}.box{width: 100%;    }.box ul{    display: flex;flex-wrap: wrap;align-items: flex-start;margin: 100px auto;width: 200px;height: 150px;background-color: #000;border: 0px solid red;border-top-width: 1px;border-left-width: 1px;}.box li{flex: 0 0 25%;height: 50px;box-sizing: border-box;border: 0px solid red;border-right-width: 1px;border-bottom-width: 1px;background-color: #fff;}.box li:nth-child(4){}</style>    
</head>
<body><div  class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></div>
</body>
</html>