css sticky footer布局+流式布局

87 篇文章 0 订阅
27 篇文章 0 订阅

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>

        .detail
           position: fixed
            z-index: 100
            top: 0
            left: 0
            width: 100%
            height: 100%
            overflow: auto
            background: rgba(7,17,27,0.8)
            .detail-wrapper
                min-height: 100% !!!
                .detail-main
                    margin-top: 64px
                    padding-bottom: 64px !!!
            .detail-close
                position: relative 
                width: 32px
                height: 32px
                margin: -64px auto 0 auto !!!设置负值,向上平移,否则在屏幕之下,看不到
                clear: both
                .icon-close
                    font-size: 32px
.clearfix
    display: inline-block
    &::after
        display: block
        height: 0
        line-height: 0
        content:"."
        clear: both
        visibility: 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> 
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值