[技巧] footer固定置底,無彈性

Published on:

前提:並不是很懂得原理為什麼會這樣,但是這個方法是輸入後輸出可行唔報錯的。

網路上有許多達成這個結果的不同做法. 這裡取其中一種結構上比較簡單的方式. 需要運用html及CSS.

html footer.html

<html>
    <body>
         <footer id="id_footer>  
        </footer> 
    </body>
</html>
  • id_footer 可自定義的代碼,每個人的都會長得不太依樣 像我的是叫做footer

< C S S 輸入內容, >

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

 .id_footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
}

Comments

comments powered by Disqus