本文主要是介绍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> 这篇关于css sticky footer布局+流式布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
