HTML - CSS - footer floating toolbar bottom 瓢浮置底的工具列


哈哈 前幾天花了不少時間用 HTML footer bottom 等相關字眼在那邊找怎麼做置底的工具列... 怎樣看都不是我要的那種, 結果今天用 html floating toolbar bottom 終於找到了! 而且還很簡單!

只要把你要置底的東西 ex.

#footer { width:100%; height:100px; position:fixed; bottom:0px; z-index:1; }

就成功啦
另外要注意的是, 因為這東西是會蓋過下面的內容, 所以你得讓下面內容的底部也空出該footer高度的空間出來, 以免看不到蓋住的內容... ex.

#page { padding:0 0 100 0; }

PS: #page為我頁面內容的容器(div)

留言

張貼留言

這個網誌中的熱門文章

jQuery - header & floating menu - dynamic detect & adjust

圖片
相信很多人都有手機相關APP的使用經驗，這些APP的介面，大多最上方會有一個Header，Header裡面可能放了一些主題名稱、功能按鈕等等。接著，我們按了某個按鈕之後，最常看到就是會跑出一個功能選單，這個功能選單是蓋在內容上方的，如圖： 我昨天花了點時間，使用HTML及CSS，把這東西實做出來了，基本上的技巧就是延續之前介紹footer的做法，透過css設定 position:fixed; 以固定Header及Menu的位置，然後內容Content上方保留一些空間， padding Header的高度。 本來以為這樣就很棒了，Perfect！但今天測試的時候發現一個問題！由於我的Title是依照顯示內容會動態改變，當這個Title文字過長而換行的時候，糟糕了，那個位置固定的話就會錯亂，如下： 看到了嗎？Menu選單顯示時應該下移一點配合Header的高度，而且Content第一行也被Header蓋住了！所以怎麼解決這問題呢？我今天想來想去，目前想到的做法是，當Header高度有改變的時候，我就跟著調整Menu跟Content的位置設定。而這個方法要完成，需要解決兩件事情，第一件事情是我要知道Header的實際高度，而第二件事情是，高度改變的時候要觸發處理事件。 先從第一件事情來，在jQuery裡有個方法叫 outerHeight() ，它會回傳我們所選取物件目前的實際高度。我們取得實際高度之後，接著去設定Menu及Content，如下： function HeaderResize() { // Header高度變動時,動態調整Page及Menu顯示的位置 var headerHeight = $('#header_title') .outerHeight (); $('#PopupMenu').css('top', headerHeight); $('#content').css('padding', headerHeight + ' 0 0 0'); } 接著第二件事情就是，我們要在高度改變的時候觸發這個處理function。高度改變有兩種狀況，第一種狀況是我們在瀏覽的時候改變了視窗大小而導致Title
閱讀完整內容

javascript - 樂透 lottery - 號碼產生器

圖片
本文想要分享，如何用javascript制作一個抽籤程式，然後是以樂透號碼為範例。 一、 首先，我們必須要知道如何使用亂數產生器，在javascript裡面 Math.random() 可以取得一個介於 0 ~ 1 (不包含1) 的浮點數亂數，而在實際使用上我們希望得到的是某個正整數，也就是編號幾號的東西，所以我們得動點手腳運算。 比如現在有一個陣列 arr[10]，裡面放著 arr['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'] 十樣東西，我們要挑出一個，所以我們希望得到的亂數是 arr 的 index： 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 其中一個號碼，於是做這樣的運算 Math.floor(Math.random() * 10) ，比如 0.452 * 10 = 4.52 去掉小數位數得到 4，比如 0.999 * 10 = 9.99 去掉小數位數得到 9。 * 10 是因為有10個選項，而 Math.floor 是去掉小數位數只取整數部份的涵式。 這樣的運算會使得每個東西的機會均等嗎? 當亂數 0 ~ 0.099... * 10 得到 0 ~ 0.99... 取 0 當亂數 0.1 ~ 0.199... * 10 得到 1 ~ 1.99... 取 1 當亂數 0.2 ~ 0.299... * 10 得到 2 ~ 2.99... 取 2 當亂數 0.3 ~ 0.399... * 10 得到 3 ~ 3.99... 取 3 當亂數 0.4 ~ 0.499... * 10 得到 4 ~ 4.99... 取 4 當亂數 0.5 ~ 0.599... * 10 得到 5 ~ 5.99... 取 5 當亂數 0.6 ~ 0.699... * 10 得到 6 ~ 6.99... 取 6 當亂數 0.7 ~ 0.799... * 10 得到 7 ~ 7.99... 取 7 當亂數 0.8 ~ 0.899... * 10 得到 8 ~ 8.99... 取 8 當亂數 0.9 ~ 0.999... * 10
閱讀完整內容