1. 程式人生 > >footer置於頁面最底部

footer置於頁面最底部

我們在做網頁的時候,有時候頁面內容太短,導致footer元素會浮在上面,很影響視覺。如下圖:

將footer置於頁面底部的思路:將footer的父元素最小高度設定為100%,footer為絕對定位,底部0即可。

<div id="wapper">
	<div id="main-content"></div>
	<div id="footer"></div>
</div>

css:
#wapper{
	position: relative;
	height: auto;
	min-height: 100%;
}
#main-content{
	padding-bottom: 60px;  /*這裡為footer預留的空間,使其不遮擋其他元素*/
}
#footer{
	position: absolute;
	bottom: 0;
	height: 60px;
}


相關推薦

HTML5將footer置於頁面底部的方法(CSS+JS)

JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); //網頁正文全文高度 var cont

footer置於頁面底部

我們在做網頁的時候,有時候頁面內容太短,導致footer元素會浮在上面,很影響視覺。如下圖: 將footer置於頁面底部的思路:將footer的父元素最小高度設定為100%,footer為絕對定位,底部0即可。 <div id="wapper"> <

Footer置於頁面底部的技巧

今天要說的是前端開發過程中的一個小技巧,沒有很大的技術含量,但在前端開發過程中經常會遇到。當頁面內容很多時,footer會在底部,但當頁面內容很少時,如何使footer始終在底部咧? 1.HTML結構 我一般是把footer寫在footer標籤裡面 <footer> //foot

頁面主體高度不固定,如何讓頁面的footer始終在底部

有時候我們的頁面主體高度並不固定,而我們又不想讓footer跟著主體高度變化而跑動,也許您會想到使用position:fixed;但是這並不能達到理想的要求,下面是我曾經在實際工作中用到的一種方法:

各種height 以及判斷滾動條是否已拉到頁面底部

scroll box nbsp .html bject ive archive 判斷 pre DTD已聲明 IEdocument.documentElement.scrollHeight 瀏覽器所有內容高度 ,document.body.scrollHeight 瀏覽器

微信小程式scroll-view無法準確滾動到頁面底部

最近在做一個模擬微信聊天頁面的小程式,在使用<scroll-view>元件的scroll-into-view屬性使頁面自動滾動到頁面最底部的時候,發現經常出現滾了一半又滾回去了。後來發現是因為我發出一條訊息之後伺服器會立刻返回一條訊息,短時間內改變了 scroll

footer一直在底部不管內容多少內容多的時候擠下去

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <styl

Css利用fixed將body佈滿全屏並保持footer始終在底部

部落格地址 把footer固定在文章底部,按理說,應該是很簡單的事情。但是今天卻折騰了我一上午。原因是: 1.利用position:absolute;bottom:0;來固定footer位

頁面滾動scroll到底部 - 載入更多資料

頁面滾動scroll到最底部 - 載入更多資料 上拉內容區域,拉到底部實現分頁功能,向後端請求更多資料載入到頁面上 vue專案,使用純js實現,網上顯示了很多外掛可以實現,我使用了幾個,都不是我需要的效果,可能沒研究明白,沒辦法只能原生實現,具體實現思路如下~ 思路:通過滾動條判斷是否到

函式解決頁面懶載入問題(即selenium拖動滾動條到懶載入網頁的底部

all_window_height =  []  # 建立一個列表,用於記錄每一次拖動滾動條後頁面的最大高度 all_window_height.append(driver.execute_script("return document.body.scrollHeight;"

兩種方式實現footer固定在頁面下方佈局

第一種方式設定html、body高度100%,footer相對body定位: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <

footer固定在網頁底部且居中,超過一屏自動撐開(簡單的CSS實現)

html {height: 100%; } body {margin: 0;padding: 0;min-height: 100%;position: relative; } #footer{position: absolute;left: 0;right: 0;botto

ionic2 跳轉子頁面隱藏底部導航欄

ges logs nav 技術 tor lar width alt 頁面跳轉 在需要跳轉頁面的.ts文件中寫入以下代碼 引入App類 import { App } from ‘ionic-angular‘; 聲明初始化app對象 constructor(pr

關於頁面外層布局及樣式

cnblogs padding bottom image 特殊 calc 20px col -- 情況一: 內容不足一屏時使父級背景鋪滿一屏,內容過高時,父級背景被內容撐開: HTML: <body>   <div class="container"&g

使用Html5搭建聊天介面定位到底部的聊天資訊

在日常的聊天工具中,我們開啟一個聊天會話首先定位到的是最近的聊天資訊,即聊天DIV佈局的最底部 實現方法 使用JS原生提供的Element.scrollIntoView()可以定位到指定元素的位置 實現程式碼 <div id='messageList' style='o

禁止 ScrollView 在子控制元件的佈局改變時自動滾動到底部

在做專案的時候,遇到了一個問題,就是有下面那樣一個佈局: 某種情況下要動態改變 ViewPager 的高度,但是有時候再改變之後,整個頁面會自動滑動到最底部,而不是保持原有的位置。 解決方法: 重寫scrollview中的如下方法,並將其返回值設為0即可。 @Override

Flutter 20: 圖解【分享頁面底部對話方塊

      小菜在學習 Flutter 過程中需要處理一個類似 Android 中 PopupWindow 效果的分享彈框頁。看似很簡單的頁面,裡面卻有很多值得嘗試的地方。       小

將div固定在頁面下面、將百度搜索框嵌入頁面

1. div固定在頁面最下面  <div style=" position:fixed;bottom:0;left:0;width: 100%;"> 2. 將百度搜索框嵌入頁面 <style type="text/c

ViewPager+Fragment滑動切換頁面(RadioButton底部導航欄)

      Activity要繼承FragementActivity,在Activity的佈局檔案中放入了一個ViewPager,為了效果好看,還做了個導航,使得ViewPager和導航欄能夠實現聯動,即ViewPager滑動切換頁面和點選導航欄切換頁面,

安卓 微信端h5 頁面 增加 底部導航欄總結

Aphorism grow in errors overview 最近在寫一個 移動端的 jsp 專案, 應專案需求須在安卓機器上實現一個 ios 微信h5頁面 底部的 導航條 想到的實現方案: 通過jsp 寫一個 父頁面然後 每個子頁面通過 include