首頁 > 開發者 > JavaScript
CSS實現底部固定，CSS實現固定
在製作頁面有這樣一種現象：當一個HTML頁面中含有較少的內容時，Web頁面的“footer”部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。
那麼如何將Web頁面的 “footer”部分永遠固定在頁面的底部呢？注意了這裡所說的是頁尾footer永遠固定在頁面的底部，而不是永遠固定在顯示器螢幕的底部，
換句話說，就是當內容只有一點點時，Web頁面顯示在瀏覽器底部，當內容高度超過瀏覽器高度時，Web頁面的footer部分在頁面的底部，總而言之Web頁面的footer部分永遠在頁面的底部，換句說，Footer部分永遠沉底。
方法：
1. HTML結構：
<div id="container"> <div id="header">Header Section</div> <div id="page" class="clearfix"> 頁面容容部分 </div> <div id="footer">Footer Section</div></div>
實現這頁尾永遠固定在頁面的底部，我們只需要四個div，其中div#container是一個容器，在這個容器之中，我們包含了 div#header（頭部），div#page（頁面主體部分），div#footer（頁尾部分）
2. CSS代碼：
html,body { margin: 0; padding:0; height: 100%;}#container { min-height:100%; height: auto !important; height: 100%; /*IE6不識別min-height*/ position: relative;}#header { background: #ff0; padding: 10px;}#page { width: 960px; margin: 0 auto; padding-bottom: 60px;/*等於footer的高度*/}#footer { position: absolute; bottom: 0; width: 100%; height: 60px;/*腳部的高度*/ background: #6cf; clear:both;}
原理：
display: block;
position: absolute;
bottom: 0;
height: 40px;
left: 0;
right: 0;
html中用css固定到最底部css怎寫？
<div style="width:200px;height:100px;border:1px solid #000;bottom:0;position:absolute">定位到底部了</div>
把這個代碼放在<body></body>裡面試下
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
