css sticky footer布局+流式布局

最後更新：2018-07-29 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More