When using Dreamweaver or Frontpage to create HTML web pages, we may encounter such a problem: once a good web page in the software is placed in the browser, it will appear at the bottom of the web page inexplicably. There are more or less blank spaces. So how to eliminate this gap?
At first I thought that I just need to add a CSS to the code of the web page to constrain the height of the web page. Facts have proved that this does not work.
Reason:
First of all, we need to know that when using software to write web pages, most of them use a graphical interface to "pile" web pages. If you stack web pages like this, when creating layers or tables , the height defined by the software for the layer or table often exceeds the height we want, but it cannot be seen in the software; however, when we open the web page in the browser, we will find that the height is not visible in the software. Existing whitespace will be displayed in the browser.
Rather than just adding an html{height:XX px;} to constrain the height of the web page, this is because in the web page, the characteristics of other elements nested inside the element will have higher priority. For example: If you have the following code in the same web page: body {font-size: 10px;} p {font-size: 9px;}, then the font size in the
element of the web page should be 9px instead of 10px . Due to the existence of this rule, when the total height of the middle layer of the web page is greater than the value of XX in html{height: XX px;}, html{height: XX px;} will naturally have no effect.
Solution:
For webpage code written in software, by looking for the definition of layer or table height in CSS, and then modifying the height value, you can remove inconsistencies in the webpage The necessary blanks are left.