Home >Web Front-end >HTML Tutorial >Looking for a css framework_html/css_WEB-ITnose
Looking for a css framework_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:20:371230browse
The page is divided into three large blocks of header, middle part and bottom part
3319a5c419788387030a63d9d33e0277 16b28748ea4df4d9c2150843fecfba68
4758c073579e10e9cca211acf9613b1c bae366f15b80a78583c5355fd60ad5c4 16b28748ea4df4d9c2150843fecfba68
It is required that the header and footer are always fixed at the top and bottom of the screen
The main height is not fixed, it is required Vertically centered (vertically centered between the header and footer), scroll bars can appear when there is a lot of content.
Please help me write the css of these three divs! I have written several but still cannot achieve the desired effect!
Reply to discussion (solution)
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
Unless your scroll bar appears on the main container instead of the browser's scroll bar, it requires js calculation. . I don’t think it’s necessary.
Quote from suncaser on the 3rd floor:
Showbo on the 1st floor: I don’t understand what vertical centering means. 🎜> XML/HTML code
12345678910111213
The content in this main is not vertically centered (centered up and down)
I don’t understand what it means to be centered up and down. . . The header and footer are different sizes and overlap them. How can I center them vertically? . ? ?
I don’t understand what vertical centering means. . . The header and footer are different sizes and overlap them. How can I center them vertically? . ? ?
I think it will be more intuitive if I draw a picture!
I understand this, I have to use js to position it
I understand this, I have to use js to position it