跨瀏覽器的實(shí)踐:position:fixed 層的固定定位
更新時(shí)間：2008年11月16日 01:59:58 作者：
一般要固定某個(gè)div,我們都會(huì)讓該div{position:fixed},它的下一個(gè)div{position:absolute}看了幾個(gè)國(guó)外的關(guān)于CSS的固定定位跨瀏覽解決方案.他們卻反其道而為之
看示例吧:
<style type="text/css">
body{
margin:0;
padding:30px 0 0 0;
}
div#menu{
position:absolute; top:0;
left:0;
width:100%;
height:30px;
background-color:#ddd;
}
@media screen{
body>div#menu{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
HTML示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
你刪除第一行注釋看看效果如何?
相關(guān)文章
做網(wǎng)頁(yè)字體大小參考 網(wǎng)頁(yè)中同字號(hào)字體的不同單位對(duì)比列表
做網(wǎng)頁(yè)字體大小參考 網(wǎng)頁(yè)中同字號(hào)字體的不同單位對(duì)比列表...2007-08-08![頁(yè)面布局黃金比例[圖片]](http://img.jbzj.com/images/xgimg/bcimg1.png)
2007-12-12
XHTML下用dl,dt,dd標(biāo)簽實(shí)現(xiàn)翻頁(yè)的效果代碼
XHTML下用dl,dt,dd標(biāo)簽實(shí)現(xiàn)翻頁(yè)的效果代碼...2007-09-09
今天制作div下的li分兩列顯示發(fā)現(xiàn)，兩邊的邊框無(wú)法完全顯示，或顯示斷斷續(xù)續(xù)的，或者拖動(dòng)滾動(dòng)條就出現(xiàn)邊框的顯示問(wèn)題2008-05-05![CSS expression控制圖片自動(dòng)縮放效果代碼[兼容 IE,Firefox]](http://img.jbzj.com/images/xgimg/bcimg4.png)
CSS expression控制圖片自動(dòng)縮放效果代碼[兼容 IE,Firefox]
一直以來(lái)有個(gè)很頭疼的問(wèn)題困擾著我，那就是圖片縮放的問(wèn)題，寫到 JS 里面吧，不太容易修改。寫到 CSS 里面吧，IE 6 又不支持 max-width2008-09-09
DIV和CSS排版中制作細(xì)線條的方法小結(jié)...2007-09-09
如何解決下拉菜單被flash覆蓋的問(wèn)題...2007-01-01
DIV CSS網(wǎng)頁(yè)布局 最小高度（min-height）的妙用
最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定，超出就自動(dòng)向下延伸，但到目前為止，只有Opera 和 Mozilla 支持，IE7開(kāi)始也支持了，但I(xiàn)E7處于測(cè)試階段，等正式版發(fā)布到普及需一段也許比較長(zhǎng)的時(shí)間，除非MS把它捆綁在某個(gè)操作系統(tǒng)上，如何在現(xiàn)有基礎(chǔ)上（IE6 80-90%），合理、妙用最小高度了？2008-11-11
input的字段當(dāng)為diabled時(shí)時(shí)無(wú)法獲取數(shù)值得，所以最近不要用這個(gè)，我們可以用readonly帶替代，即可解決這類問(wèn)題2008-09-09
IE6不能正常解析CSS文件問(wèn)題的解決方法及原因分析
IE6因?yàn)榫幋a問(wèn)題無(wú)法正確解析CSS文件2008-12-12