css sticky footer布局+流式布局

最新推荐文章于 2024-07-21 20:01:56 发布

秋天1014童话

最新推荐文章于 2024-07-21 20:01:56 发布

阅读量2.6k

点赞数 2

分类专栏： web前端 Vue框架 javaScript CSS3

本文链接：https://blog.csdn.net/u013217071/article/details/72875636

版权

web前端同时被 3 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

参考地址：张鑫旭老师-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>