The page is divided into three large blocks of header, middle part and bottom part
Like this? I don't understand what it means to center main vertically. .
<!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>
Not compatible with ie6-, because it does not support fixed positioning and needs to use js. I am too lazy to write it. You have to write your own js to be compatible with ie6
Like this? I don't understand what it means to center main vertically. .
XML/HTML code
?
12345678910111213
The height of the computer display is different. The height of the main is the height of the client computer screen excluding the header and footer. The content in the main is centered vertically (centered up and down) within this height.
XML/HTML code
?
12345678910111213
12345678910111213
I understand this, I have to use js to position it