FrontEnd 步步高昇:header和footer始終顯示在瀏覽器頂部和底部,中間區域自適應

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

思路:

瀏覽器大小改變會觸發JS事件:window.onresize
獲得瀏覽器大小減去頂部+底部得到中間區域大小

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="css/one.css" rel="stylesheet">
    <script src="js/one.js" type="text/javascript"></script>
</head>
<body>
    <header id="headBlock"></header>
    <div    id="bodyBlock" class="body"></div>
    <footer id="footBlock"></footer>
</body>
</html>

CSS:

/* 韋哥說 這裡是必須的,這才是真正專案用到的 */
html{
    height: 100%:
}
body{
    height: 100%;
    margin: 0;
}
/**********************************************/
#headBlock {
    height: 60px;
    background-color: red;
}

#footBlock {
    height: 60px;
    background-color: yellow;
}

.body {
    background-color: blue;
    overflow-y: scroll;
}

JS:

function reSizeBodyBlock() {
    "use strict";
    var browserHeight = document.documentElement.clientHeight,
        headHeight    = document.getElementById("headBlock").offsetHeight,
        footHeight    = document.getElementById("footBlock").offsetHeight,
        bodyBlockHeight = (browserHeight - headHeight - footHeight).toString() + "px";  //為什麼要加toString()? 因為程式碼要給更多的人看!!!!
    document.getElementById("bodyBlock").style.height = bodyBlockHeight;
}

window.onload = window.onresize = reSizeBodyBlock;

/* ------------------------------------------------------------------ 2015-02-12 17:03:43 ------------------------------------------------------------------ */

更簡單靈活的方法：

function initFullBlockBlock() {
    if (!document.getElementById("full-block")) return;
    var fullBlockHeight = document.getElementById("full-block").offsetHeight,
        browserHeight = document.documentElement.clientHeight,
        bodyHeight = document.getElementsByTagName("body")[0].offsetHeight;
    bodyBlockHeight = (browserHeight - bodyHeight + fullBlockHeight).toString() + "px";
    document.getElementById("full-block").style.height = bodyBlockHeight;

}

FrontEnd 步步高昇:header和footer始終顯示在瀏覽器頂部和底部,中間區域自適應

思路: 瀏覽器大小改變會觸發JS事件:window.onresize獲得瀏覽器大小減去頂部+底部得到中間區域大小 HTML: <!DOCTYPE html> <html> <head> <meta charset

JQuery 彈出層，始終顯示在屏幕正中間

filter scrolltop rep 指定 mode spa -c target mod 1.讓層始終顯示在屏幕正中間：樣式代碼： Html代碼 .model{ position: absolute; z-ind

如何修改手機端分享網頁給微信好友和朋友圈顯示的圖片和標題

最初，我以為這個東西很複雜，還微信開發者哪裡找了文件來看。準備使用微信JS-SDK裡面的方法….. 但是它僅僅只是這樣子的簡單。微信好友和朋友圈都差不多，以分享到微信好友的為例 &l

Jquery的彈出框，始終顯示在裝置的正中間

作為前端，彈窗是經常寫的，大多數彈出框都會顯示在裝置（PC或者移動端）的正中間。下面給大家介紹下我的方法，僅供參考！ 1.讓層始終顯示在螢幕正中間： Css程式碼：Html程式碼 .mode

html 頁面根據瀏覽器視窗大小實時調整--（自適應）的js程式碼控制

1.js程式碼 //iframe自適應 $(window).on('resize', function() { // 設定Iframe視窗大小 configIframe(); }).resize(); function configIframe(){ var

scrollIntoView將指定元素定位到瀏覽器頂部，底部，中間

lint pan lock col code .get near view res var element = document.getElementById("box"); element.scrollIntoView();//頂部 element.scro

css橫向最右和最左動態寬度，中間寬度自適應程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,in

css 頭部和底部固定，中間高度自適應，出滾動條 css程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initia

頂部和底部固定高度，中間高度自適應的佈局

html程式碼 <div id="all"> <div id="top">top</div> <div id="conte

react滾動條開發適配PC 和移動端的滾動顯示隱藏header和footer/滾動顯隱公用元件

功能描述：移動端時，上滾則顯示footer,下滾則隱藏footer PC端時，上滾則顯示header,下滾則隱藏header。 xx.js import React, { Component } from 'react'; import { BrowserR

IOS開發學習筆記十五為UITableView控制元件新增Header和Footer

效果圖：專案地址新增圖片素材，新增plist檔案，新增名為CZGoods的module檔案 @implementation CZGoods - (instancetype)initWithDict:(NSDictionary *)dict { if

View的學習筆記(三)_自己造輪子_一個帶header重新整理頭和footer載入腳的

帶重新整理指示item的RecyclerView 實現效果造輪子的經驗總結設計思路事件分發處理實現效果使用方法可以指定控制元件大小,預設的RecyclerView會填充指定的大小自定義屬性就

HTML中--定義header和footer高度中間自適應

<html> <head> <meta charset="utf-8" /> <title></title> <style> html,

封裝RecyclerView Adapter 實現可新增多個header和footer,可設定loadingView，低耦合的多種佈局。

多種佈局的recyclerview的普通寫法是重寫RecyclerView.Adapter的getItemViewType返回不同position上的type，在onCreateViewHolder(ViewGroup parent,int viewType

Android 瀑布流遇到的各種問題(item移動，載入更多圖片閃爍，以及定製各種型別Header和Footer)

轉載地址：http://blog.csdn.net/windows771053651/article/details/51596744 功能：圖片瀑布流問題1：如何保持已顯示過的imageview的尺寸解決方法：定義一個HashMap<Integer,

Android中Recyclerview使用13----實現瀑布流遇到的各種問題(item移動，載入更多圖片閃爍，以及定製各種型別Header和Footer)

功能：圖片瀑布流問題1：如何保持已顯示過的imageview的尺寸解決方法：定義一個HashMap<Integer, Float> indexMap = new HashMap<Integer, Float>();用來儲存已顯示過的Ima

記錄問題:從使用者輸入一個網址到頁面顯示,瀏覽器和伺服器發生了什麼?

這個問題,曾經被無數次作為面試題,原因很簡單,無論是大佬還是菜鳥,這個問題多多少少都能回答出來,而你回答的深度和廣度則可以判斷你在什麼樣的水平上,到達了怎樣的高度. 今天就重點解析一下這個問題. 簡潔版大概是這樣的: 瀏覽器根據請求的URL交給

jqm中header和footer不固定可上下移動問題

data-position=fixed失效特別在微信中比較明顯，容易出現這種問題需要在div表情加個樣式 style="position: fixed;" 並搭配data-tap-toggle="false" 保持最前固定位置顯示 data-tap-toggl

javascript檢測各種瀏覽器型號和版本、檢測是否支援flash並顯示版本

對於前端來說瀏覽器的型號版本，各個瀏覽器的相容是一個不可忽視的問題。下面本人詳細羅列了測試方法。請複製程式碼新建html檔案複製後訪問。一目瞭然。最後富有羅列的一些各個不同瀏覽器的版本號，用於資料參考。 <!DOCTYPE html> <html>

ThinkPHP如何給網頁加公共的header檔案和footer檔案

在thinkPHP的手冊的模板裡面有模板繼承，模板繼承的優勢其實是設計基礎模板中的區塊（block）和子模板中替換這些區塊具體如下：每個區塊由<block></block>標籤組成。下面就是基礎模板中的一個典型的區塊設計（用於設計網站標題）

FrontEnd 步步高昇:header和footer始終顯示在瀏覽器頂部和底部,中間區域自適應

相關推薦