2. 程式人生 > >Sticky footers佈局的實現

Sticky footers佈局的實現

阿新 • • 發佈：2019-01-13

1.什麼是sticky footers佈局

在網頁設計中，Sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經歷過。它可以概括如下：如果頁面內容不夠長的時候，頁尾塊貼上在視窗底部；如果內容足夠長時，頁尾塊會被內容向下推送。

2.Flexbox解決方案

我們需要給外層.wrapper元素設定flex彈性佈局，主軸排列方向為豎直方向，設定min-height值為100vh，讓.wrapper內容不足視窗高度時也能佔據整個視窗，再給內部的每個盒子設定flex值，使其自動伸縮的來適配剩餘空間。

<!DOCTYPE html>
<html lang="en"
 
>
<head>
    <meta charset="UTF-8">
    <title>Sticky footers</title>
    <style>
        *{
            margin:0;
        }
        body {
            font-size: 40px;
        }
        .wrap {
            min-height: 100vh;
            display: flex;
            flex-direction
 
: column;
        }
        .top {
            flex: 4;
        }
        .bottom {
            flex: 1;
        }
        .box {
            background-color: #afa;
            width: 64px;
            height: 64px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div
 
 class="wrap">
    <div class="top">
        <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
        <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
        <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
        <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
        <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
        <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
        <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
        <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
    </div>
    <div class="bottom">
        <div class="box"></div>
    </div>
</div>
</body>
</html>

3.固定高度的解決方案

.detail元素絕對定位，高度和寬度鋪滿整個螢幕，.detail-wrapper元素最小高度為100%，關鍵是設定.detail-main元素padding-bottom值以及.detail-close元素負的margin-top值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sticky footers</title>
    <style>
        *{
            margin:0;
        }
        .detail {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .detail-wrapper {
            min-height: 100%;
        }
        .detail-main {
            font-size:40px;
            padding-bottom: 100px;
        }
        .detail-close {
            background-color:#afa;
            width: 64px;
            height: 64px;
            margin: -100px auto 0;
        }
    </style>
</head>
<body>
<div class="detail">
    <div class="detail-wrapper">
        <div class="detail-main">
            <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
            <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
            <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
            <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
            <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
            <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
            <p>這是一篇我自己關於sticky footers的理解，今天因為做專案用到了，幾經找資料，終於搞懂了，就趕緊記下來，免得忘記了！</p>
        </div>
    </div>
    <div class="detail-close"></div>
</div>
</body>
</html>

相關推薦

Sticky footers佈局的實現

1.什麼是sticky footers佈局 在網頁設計中，Sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經歷過。它可以概括如下：如果頁面內容不夠長的時候，頁尾塊貼上在視窗底部；如果內容足夠長時，頁尾塊會被內容向下推送。 2.Fle

css佈局之Sticky footers佈局

這個佈局的名字我也是頭一次聽說，中文名姑且叫粘性的footers吧，這是在學習過程中瞭解的，現在拿出來分享一下。 先看佈局實現的效果： 這是一個彈出層，整體分為上部分的內容區域和底部的關閉按鈕，當內容較少時關閉按鈕始終在頁面底部，當

Sticky footers 套路

按鈕 auto blog com css secret details -h class 【CSS Secrets】 http://shop.oreilly.com/product/0636920031123.do 以餓了麽商家信息的彈出層為例，布局如下： <

Sticky Footer的實現

pla 保持 top spa 可用 nbsp add http 一個 Sticky Footer即絕對底部，是一種常用的布局方式，頁腳在內容區未超出窗口高度時一直保持在最底部顯示，而超過窗口高度時則保持在內容區最底部。 有兩種實現方法： 第一種：經典的實現方式 htm

HTML5 Table 佈局實現 商品列表

 執行結果如上。。。。 下面說說設計過程： 一開始試探的做的時候，是建立了一個table，這個table裡面放一本圖書的資訊。然後建立了一個列，然後建立了個td，td裡面放圖片，td那個表格多佔幾列，然後再建一個tr放圖書資訊，這樣做了之後發現，tr那一列直接放到圖書下面去了

Android ListView不同的item佈局實現

類似與這個 聊天效果 和 進入直播間 注意 在使用不同佈局的時候,在介面卡中 getItemViewType和getViewTypeCount不能少,一般的同一種item的列表是不用這兩個函式的過載的，但是如果需要不同種類的item，就必須過載這兩個

css Sticky footer的實現

有時候製作網頁的時候當內容太少的時候，不足於填充一屏的視窗區域，按普通的佈局，就會出現下面圖片中的樣子(也就是底部內容並沒有位於視窗的底部，而留下了大量空白）。 一：第一種方法：國外大神提供 <!DOCTYPE html> <html> <he

UIButton 自定義子佈局 實現圖文排版

效果圖 程式碼示例 // // LYUContentLayoutBtn.swift // LYUMVVMKit // // Created by LYU on 2018/5/24. // Copyright © 2018年 LYU. All rights reser

rem佈局實現不同解析度移動終端的自適應、整體縮放

前言 現在手機螢幕解析度越來越多，但我們的需求比較唯一——最佳視覺。  當用戶瀏覽網頁時，根據螢幕的尺寸，來向用戶展示更適合使用者的佈局、文字、圖片、按鈕等等，因此，rem應運而生。  rem（font size of the root element）是指相對於根元素的字型

流式佈局 實現搜尋框

自定義View類 public class FlowLayout extends ViewGroup { public FlowLayout(Context context) { this(context,null); } public Flow

類似footer的效果，利用簡單的佈局實現ListView底部懸浮控制元件

平時使用listview/recycleview的時候，都會經常碰到這麼一個需求：就是一個ListView下面懸浮一個佈局，當ListView的項超過螢幕下方則固定在底部。 一開也是想到用ListView的footer去實現，後來發現一個簡單的佈局實現這個功能。 看圖：  

小標題兩側加橫線或背景圖片自適應佈局實現技巧

<div class="tit-bar"> <div class="deg">滿意度調查</div> </div> .tit-bar .deg { width:100%; font-size: 16px; color: #555;

【CSS】Sticky Footer 佈局

什麼是 Sticky Footer 佈局？ Sticky Footer 佈局是一種將 footer 吸附在底部的CSS佈局。 footer 可以是任意的元素，該佈局會形成一種當內容不足，footer 會定位在視口的最低部，當內容充足，footer 會緊跟在內容後面的效果。  

Android 實現輪播圖效果 底部圓點佈局實現

1、準備底部圓點的素材、利用Drawable的功能，去實現一個圓點圖片的展示 drawable下新建兩個Drawable resource file：dot_normal.xml和dot_select.xml dot_normal.xml <?xml vers

Cloud Foundry Session Affinity(Sticky Session)的實現

會話保持(Session Affinity),有時又稱粘滯會話(Sticky Sessions), 是負載均衡領域設計需要著力解決的重要問題之一，也是一個相對比較複雜的問題。 會話保持是指在負載均衡器上的一種機制，在完成負載均衡任務的同時，還負責一系列相關連的訪問請求會分配到一臺伺服器上｡ 當用戶向伺服器發起

HTML5 Table 佈局實現 商品列表

 執行結果如上。。。。 下面說說設計過程： 一開始試探的做的時候，是建立了一個table，這個table裡面放一本圖書的資訊。然後建立了一個列，然後建立了個td，td裡面放圖片，td那個表格多佔幾列，然後再建一個tr放圖書資訊，這樣做了之後發現，tr那一列直接放到圖書

css中的Sticky footer 佈局

什麼叫Sticky footer 佈局呢？ 我們所見到的大部分網站頁面，都會把一個頁面分為頭部區塊、內容區塊和頁尾區塊，當頭部區塊和內容區塊內容較少時，頁尾能固定在螢幕的底部，而非隨著文件流排布。當頁

利用相對佈局實現使用者註冊功能

執行效果如下圖所示： 一、實現佈局檔案： 1、註冊介面程式碼： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.andr

自定義 流式佈局實現

首先佈局得清晰--建立一個自定義控制元件 <com.example.mr.flow     android:id="@+id/ffff"     android:layout_width="match_parent"     android:layout_height=

CSS： Sticky footers

問題 在網頁設計中，Sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經歷過。它可以概括如下：如果頁面內容不夠長的時候，頁尾塊貼上在視窗底部；如果內容足夠長時，頁尾塊會被內容向下推送。 這種效果不僅是無處不在，很受歡迎，而且實現起來看上去也非常容易。但實際上實