利用box flex實現 dom元素位置頁面底部

2022-07-13 08:45:11 字數 1010 閱讀 8564

問題:

總是有這樣的需求,就是頁面上某部分要位於頁面的最底部,此「最底部」要求:(1)當頁面上內容不足一屏的時候,在最底部顯示(2)當頁面上內容不止一屏的時候,也就是有垂直滾動條的時候,要在內容的最後顯示

最容易想到的定位方法:

(1)position:absolute  

position:absolute;

bottom:0;

left:0

此種方法只能把該元素定位到第一屏的最底部,它並不會隨著滾動條的出現跑到內容的最後面去。滿足(1)不滿足(2)

(2)position:relative

此種方法只能滿足(2),不能滿足(1),當然要滿足(1)的話,可以配合使用js, 思路是利用js計算螢幕高度,減去底部高度,設定除底部的其他元素的高度。

最簡單的方法(需要支援css3的box-flex屬性):

關於box-flex的詳細講解請看:

利用box-flex屬性就可以實現上面提到的需求,見下面的**:

<

style

>

.con

.wrap

.main

.footer

style

>

<

div

class

="con"

>

<

div

class

="wrap"

>

<

div

class

="main"

>

div>

<

div

class

="footer"

>

div>

div>

div>

這樣,footer 就以30px的畫素告訴一直位於頁面的底部,並且滿足(1),滿足(2)

利用forEach迴圈Dom元素

大家都知道foreach是迴圈陣列用的,而且很方便,可以丟掉for迴圈了,但是它不能迴圈dom元素。其實我們可以利用call來完成foreach迴圈dom 假設有這樣的html結構 點選上面的li來輸出自身的索引值,具體可看下面 var arrli document.queryselector bo...

C 利用vector容器實現最大最小元問題

分治法求最大最小元 include iostream include vector using namespace std void maxmin int i,int j,int max1,int min1,vector l int main int i 0 int j v.size 1 int m...

利用dom4j生成帶dom的xml檔案

直接利用dom4j生成的xml是不帶dom頭的,但需要應用中需要帶dom頭的xml檔案,比如fusionchart在載入xml資料檔案時 要求資料檔案為帶dom頭的xml,下面 示例如何生成帶dom頭的xml。public static document createdom mapdata retu...