Let's talk about some of the problems found in the process of trying.
1, Box model problem
Believe that playing refactoring or div+css friends should all know this thing, nonsense not to say, do not know and interested can go online search. Here I mention this because the layout is controlled by a percentage, so when the border is added to the 1px side, it is not easy to lose back, I abandoned the top border style.
2. Overflow problem
This problem as long as the overflow do hidden to prevent the content too long and overflow. In the beginning, you can add a hidden property to the HTML and body overflow. Blank tells me that IE default is the width of the scroll bar (this I know), and FF is not (this I do not know).
Basically, the code looks like this:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> upper layer test </title> <style type=" Text/css "> <!--*{margin:0px; padding:0 px } html,body{height:100%;} * HTML, * HTML body {overflow:hidden;/* Hide IE's default scrollbar width */} #bodyDiv {width:100%; height:100%; } #topDiv {height:88%; background: #ccc; border:1px solid #000; overflow:auto;/* When overflow displays scroll bar to Auto */} #bottomDiv {height: 12%; Background: #f4f4f4; border:1px solid #F00; margin-top:-4px; Overflow:auto; } h3{font-size:14px; Font-weight:bold,}-</style> </pead> <body> <p> above </p> < br><br> <br><br> <br><br> <br><br> <br><br> <br>< br> <br><br> <br><br> <br><br> <br><br><br><br><br><br><br><br><br><br><br> <BR><BR><BR><BR><BR><BR><BR><BR><BR/><br><br ><br><br> <p> below </p> </body> </ptml> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
