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

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

<!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。問：這樣寫的

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

相關推薦