DIV CSS webpage alternative top-bottom layout example code_Experience exchange

Let me first talk about a few problems discovered during the trial process
1. Box model problem
I believe that friends who are playing with refactoring or DIV CSS should all know this thing. I won’t talk nonsense. If you don’t know it, you are interested. You can search online. I mention this here because this layout is controlled by percentage, so after adding a 1px edge to the border, it is difficult to reduce it back. I discarded the upper border style.

2. Overflow problem
This problem can be solved by hiding the overflow to prevent the content from being too long and overflowing. At the beginning, you can add a hidden attribute to the overflow of html and body. Blank told me that IE has a scroll bar width by default (I don't know this), but FF does not (I don't know this).

That’s basically it, the code is as follows:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Upper and lower layer testing</title> <style type="text/css"> <!-- *{ margin:0px; padding:0px; } html,body{ height:100%; } * html, * html body { overflow: hidden; /*Hide the width of IE's default scroll bar*/ } #bodyDiv{ width:100%; height:100%; } #topDiv{ height:88%; background:#ccc; border:1px solid #000; overflow:auto; /*When overflowing, the scroll bar is displayed as auto */ } #bottomDiv{ height:12%; background:#f4f4f4; border:1px solid #F00; margin-top:-4px; overflow:auto; } h3{ font-size:14px; font-weight:bold; } --> </style> <div id="bodyDiv"> <div id="topDiv"> <h3 id="above">above</h3> <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> </div> <div id="bottomDiv"><h3 id="below">below</h3></div> </div>