求一个css框架_html/css_WEB-ITnose
Jun 24, 2016 pm 12:20 PM 页面分三大块头部 中间部分 和底部
要求header 和footer始终固定在屏幕最上方和最下方
main高度不固定,要求垂直方向居中（在header和footer之间垂直居中），内容比较多时，可以出现滚动条。
请各位达人帮忙写下这三个div的css！自己写了几个始终不能达到理想的效果！
回复讨论(解决方案)
这样？没明白main垂直居中什么意思。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><style>body{margin:0px;}#header,#footer{height:150px;border:solid 1px black;position:fixed;top:0px;width:100%;background:#ffffff;left:0px}#main{margin:0px auto;width:1000px;padding-top:150px;}#footer{height:80px;top:auto;bottom:0px;}</style><div id="header">页头</div><div id="main">要求header 和footer始终固定在屏幕最上方和最下方 main高度不固定,要求垂直方向居中（在header和footer之间垂直居中），内容比较多时，可以出现滚动条。<br /> 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1</div><div id="footer">页脚</div>不兼容ie6-，因为不支持fixed定位，需要用js，懒得写了，你要兼容ie6自己写js
这样？没明白main垂直居中什么意思。。
XML/HTML code
?
12345678910111213
引用 1 楼 showbo 的回复:这样？没明白main垂直居中什么意思。。
XML/HTML code
?
12345678910111213
我贴出来的不用管main高度，只要高度超过了就自动出现滚动条，不用计算main的高度就是客户端电脑屏幕除去header 和footer的高度
除非你的滚动条出现在main容器上，而不是浏览器的滚动条，那需要js计算。。感觉没这个必要。
引用 3 楼 suncaser 的回复:
引用 1 楼 showbo 的回复:这样？没明白main垂直居中什么意思。。
XML/HTML code
?
12345678910111213
这个main中的内容没有垂直居中（上下方向居中）
没明白什么叫上下方向居中。。。页头和页脚大小不一样而且覆盖在上面，怎么垂直居中。。？？
没明白什么叫上下方向居中。。。页头和页脚大小不一样而且覆盖在上面，怎么垂直居中。。？？
我想我画个图更直观一些！
这个明白了，得用js来定位了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><style>body{margin:0px;}#header,#footer{height:150px;border:solid 1px black;position:fixed;top:0px;width:100%;background:#ffffff;left:0px;z-index:100}#main{width:100%;position:absolute;top:150px;left:0px;overflow:auto;background:#eeeeee}#footer{height:80px;top:auto;bottom:0px;}</style><div id="header">页头</div><div id="main">要求header 和footer始终固定在屏幕最上方和最下方 main高度不固定,要求垂直方向居中（在header和footer之间垂直居中），内容比较多时，可以出现滚动条。<br /> 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div><div id="footer">页脚</div><script>function resetMain(){ var m=document.getElementById('main'),mh=m.offsetHeight; var sh=document.documentElement.clientHeight,avh=sh-150-80/*main的可用高度*/; if(mh<avh){ m.style.top=(avh-mh)/2+150+'px' } else m.style.top='150px';}window.onload=window.onresize=resetMain;</script> 这个明白了，得用js来定位了
XML/HTML code
?
1234567891011121314151617181920212223
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition……
非常感谢！这个不错！虽然position:fixed;在ie6中不支持！但ie6也就像快要下山的夕阳了！
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
Mar 04, 2025 pm 12:32 PM
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?
Mar 17, 2025 pm 12:27 PM
Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?
Bagaimana cara menambah kesan strok kepada imej PNG di laman web?
Mar 04, 2025 pm 02:39 PM
Bagaimana cara menambah kesan strok kepada imej PNG di laman web?
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Apakah tujuan & lt; meter & gt; unsur?
Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?
Mar 17, 2025 pm 12:20 PM
Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Apakah tujuan & lt; DATALIST & GT; unsur?
Bagaimana saya menggunakan html5 & lt; meter & gt; elemen untuk memaparkan data berangka dalam julat?
Mar 12, 2025 pm 04:08 PM
Bagaimana saya menggunakan html5 & lt; meter & gt; elemen untuk memaparkan data berangka dalam julat?
