footer一直在最底部不管內容多少內容多的時候擠下去
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,html { margin: 0; padding: 0; font: 12px/1.5 arial; height:100%; } #content { min-height:100%; position: relative; } #main { padding: 10px; padding-bottom: 60px; } #footer { position: absolute; bottom: 0; padding: 10px 0; background-color: #AAA; width: 100%; } #footer h1 { font: 20px/2 Arial; margin:0; padding:0 10px; } </style> </head> <body> <div id="content"> <header>header</header> <section> <div id="main"> <h1>main</h1> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <br> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <h1>main</h1> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <br> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <h1>main</h1> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <br> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <h1>main</h1> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <br> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <h1>main</h1> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <br> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <h1>main</h1> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <br> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <h1>main</h1> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> <br> <p>你可以改變瀏覽器視窗的高度,來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> </div> </section> <footer> <div id="footer"> <h1>Footer</h1> <div> </footer> </div> </body> </html>
相關推薦
footer一直在最底部不管內容多少內容多的時候擠下去
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <styl
當頁面內容不夠的時候,怎麼讓footer一直底部顯示?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>html
微服務寫的最全的一篇文章(內容較多,可先收藏後慢慢研磨)
今年有人提出了2018年微服務將瘋狂至死,可見微服務的爭論從未停止過。在這我將自己對微服務的理解整理了一下,希望對大家有所幫助。 1.什麼是微服務 1)一組小的服務(大小沒有特別的標準,只要同一團隊的工程師理解服務的標識一致即可) 2)獨立的
KVO---視圖間數據的傳遞:標簽顯示輸入的內容【多個視圖中】
tla trac content color smis rep ret oot ani RootViewController.m #import "ModalViewController.h" @interface RootViewController () @en
單例---視圖間數據的傳遞:標簽顯示輸入的內容【多個視圖中】
release 視圖 pro button data- pos view copy field RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; self.view.
實現移動端頂部與底部固定,內容區優化的效果
tro 好的 中心 use cal ul li dea tex 出場 實現頂部與底部固定的效果十分容易,且很多人都會選擇用這個方式,就是頂部position:fixed,底部也position:fixed。實現的效果就像下面兩張圖,container區域是布滿整個屏幕的,且
文件內容轉換多層字典(適合新手理解)
返回 date usr 新手 return utf-8 輸入 pass pda #!/usr/bin/env python#-*- coding:UTF-8 -*-flag = 0return_flag = 0f = open("file3.txt","r",encodin
使用on-my-zsh時,php 輸出內容後面多個%號
hello 結果 發現 輸出內容 span 多個 問題 換行 完全 今天用php寫個命令行的小工具時,突然發現在echo輸出後,總是會多個%號,開始以為是代碼的問題,然後新建了一個代碼文件: <?php echo ‘hello world‘; 輸出結果: hello
oracle 如何將一個字段內容拆分多行顯示
eve 內容 fun regex sel 字符 小寫 位置 odi 例子: select regexp_substr(‘1,2,3,4,5‘, ‘[^,]+‘, 1, level)from dualconnect by level <= regexp_count(‘1
HTML5將footer置於頁面最底部的方法(CSS+JS)
JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); //網頁正文全文高度 var cont
頁面滾動scroll到最底部 - 載入更多資料
頁面滾動scroll到最底部 - 載入更多資料 上拉內容區域,拉到底部實現分頁功能,向後端請求更多資料載入到頁面上 vue專案,使用純js實現,網上顯示了很多外掛可以實現,我使用了幾個,都不是我需要的效果,可能沒研究明白,沒辦法只能原生實現,具體實現思路如下~ 思路:通過滾動條判斷是否到
springmvc請路徑引數,springmvc-json-ajax使用,springmvc檔案上傳,springmvc檔案下載,springmvc攔截器(內容較多)
按照操作,絕對都可以實現,親測。。。。。(專案所有檔案和目錄結構全都放上去了) idea工具,建立maven專案 第一步: 放置各種配置檔案: pom.xml <?xml version="1.0" encoding="UTF-8"?> <p
史上最全Java學習內容
前端部分: 1)HTML:網頁的核心語言,構成網頁的基礎 2)CSS:使網頁更加豐富多彩燦爛的利器 3)JavaScript:使網頁動起來的根本,加強了網頁和使用者之間的互動 4)HTML DOM:換一種更加形象化的角度來看待網頁,讓我們更加方便的控制網頁 5)HTML BOM:
dedecms自定義模型內容呼叫多個Ueditor
關於dedecms後臺如何整合百度編輯器(ueditor)網上有很多了,本站就不再贅述了,主要問題是,涉及到如果有內容模型的修改,則按照網路上介紹的方法會發現有BUG。當修改過預設的文章模型或者其他模型,有新增自定義欄位,欄位型別是HTML格式或者文字儲存HTML格式,當你釋出或者編輯內容的時候,發現要麼
複雜選擇器 內容生成 多列 CSSHack(瀏覽器相容)
1、兄弟選擇器 匹配指定元素的相鄰兄弟元素 1、相鄰兄弟選擇器 匹配相鄰的元素 匹配當前元素【後面】的【一個】元素,前提兩者必須擁有相同父元素 語法: selctor1+selector2 通過 + 作為結合符 eg
table表格某一td內容太多導致樣式混亂的解決方案
問題在開發過程難免遇到這樣那樣的問題。對於有很多條目的資料,我們通常採用table元素來快速實現。如果某一個td的內容太多的話就會出現下面的情況,導致樣式混亂難看: 解決方案要讓table的寬度固定我們可以給table元素設定table-layout:fixed;樣式,但這
footer置於頁面最底部
我們在做網頁的時候,有時候頁面內容太短,導致footer元素會浮在上面,很影響視覺。如下圖: 將footer置於頁面底部的思路:將footer的父元素最小高度設定為100%,footer為絕對定位,底部0即可。 <div id="wapper"> <
bootstrap table th內容太多表格撐破(自動換行)
增加樣式 style="word-break:break-all; word-wrap:break-all;" 這樣內容就會自動換行,表格就美觀多了。 <table class="table table-bordered table-hover tab
eclipse控制檯列印內容太多,直接輸出到檔案
相信大家都遇到這樣的問題,很多時候我們也都會通過列印到檔案的操作去解決這種問題,但是對於一些自己寫的小的測試程式碼,實在是不想那麼麻煩,這個時候肯定想到是不是ide會為了我們提供解決方法呢,我經過小小的探索發現了還真有,哈哈哈大家肯定想到的第一個就是讓eclipse的cons
HTML中關於class內容空格多類名的問題詳解
get 關於 兩個類 轉載 http 一個 限制 一次 com 之所以想談談這個,不明所以。所以轉載下來方便自己看看。 問:像 class="info fl" 這種class定義是何意思? 答:這裏的空格隔開後,它們所代表的是兩個類名,分別為info和fl。 問:這樣寫的