日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用Flex實現(xiàn)5種常用布局

Sticky Footer

成都創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為雁峰企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站設(shè)計，雁峰網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

經(jīng)典的上-中-下布局。

當頁面內(nèi)容高度小于可視區(qū)域高度時，footer 吸附在底部；當頁面內(nèi)容高度大于可視區(qū)域高度時，footer 被撐開排在 content 下方

demo link

 

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.   
    HEADER
      
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5.   
    CONTENT
      
    6. 
  
  
  
  
  6.   
    7. 
  
  
  
  
  7.   
    FOOTER
      
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9.  
    10.

 

 
 
 
 
    
  
  
  
  
  1. body { 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   min-height: 100vh; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.   display: flex; 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   flex-direction: column; 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. article { 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.   flex: auto; 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. } 
    16.

Fixed-Width Sidebar

在上-中-下布局的基礎(chǔ)上，加了左側(cè)定寬 sidebar。

demo link

 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   
    HEADER
     
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.    
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.     
    CONTENT
     
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.   
 
  •  
  •   
    FOOTER
     
  •  
  •  
    •  
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   min-height: 100vh; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   display: flex; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.   flex-direction: column; 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11. .content { 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   flex: auto; 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.   display: flex; 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19. .content article { 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.   flex: auto; 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23. } 
      24.

    Sidebar

    左邊是定寬 sidebar，右邊是上-中-下布局。

    demo link

     

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.    
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.    
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     
      HEADER
       
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.     
      CONTENT
       
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.     
      FOOTER
       
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   
     
  •  
  •  

    •  

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   min-height: 100vh; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   display: flex; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. aside { 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.   flex: none; 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. } 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15. .content { 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.   flex: auto; 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.   display: flex; 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.   flex-direction: column; 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23. } 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25. .content article { 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27.   flex: auto; 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29. } 
      30.

    Sticky Header

    還是上-中-下布局，區(qū)別是 header 固定在頂部，不會隨著頁面滾動。

    demo link

     

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
      HEADER
       
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   
      CONTENT
       
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.   
      FOOTER
       
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.

     

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   min-height: 100vh; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   display: flex; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.   flex-direction: column; 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.   padding-top: 60px; 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. header { 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.   height: 60px; 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.   position: fixed; 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.   top: 0; 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.   left: 0; 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.   right: 0; 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25.   padding: 0; 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27. } 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29. article { 
      30. 
  
  
  
  
    30.  
      31. 
  
  
  
  
    31.   flex: auto; 
      32. 
  
  
  
  
    32.  
      33. 
  
  
  
  
    33.   height: 1000px; 
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35. } 
      36.

    Sticky Sidebar

    左側(cè) sidebar 固定在左側(cè)且與視窗同高，當內(nèi)容超出視窗高度時，在 sidebar 內(nèi)部出現(xiàn)滾動條。左右兩側(cè)滾動條互相獨立。

    demo link

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.     ASIDE 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     
      item
       
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.     
      item
       
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.      
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.     
      item
       
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.    
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.    
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.     
      HEADER
       
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.     
      CONTENT
       
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.     
      FOOTER
       
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25.   
     
  •  
  •  

    •  

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   height: 100vh; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   display: flex; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. aside { 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.   flex: none; 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   width: 200px; 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.   overflow-y: auto; 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.   display: block; 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19. } 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21. .content { 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.   flex: auto; 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25.   display: flex; 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27.   flex-direction: column; 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29.   overflow-y: auto; 
      30. 
  
  
  
  
    30.  
      31. 
  
  
  
  
    31. } 
      32. 
  
  
  
  
    32.  
      33. 
  
  
  
  
    33. .content article { 
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35.   flex: auto; 
      36. 
  
  
  
  
    36.  
      37. 
  
  
  
  
    37. }  
      38.

    網(wǎng)頁題目：使用Flex實現(xiàn)5種常用布局
    本文地址：http://www.dlmjj.cn/article/djgjdss.html