Use unordered tags to control HTML output results

There is a special form Element in the HTML element. We use it to collect form data and submit it to the server, and theoretically it is not rendered by any UI. Of course, if we keep up with a form behind the body element, it seems that there is no UI rendering problem, but when the form exists in other elements, there is a problem.

What's the problem? As shown in the following example, I need to control the page scroll bar because of the page layout. I hide the scroll bar of the body, and then use a div element to "customize" a scroll bar, htmlCodeAs follows:

< Html >
< Head >
< Title > Layout demo </ Title >
< Meta Name = "Author" Content = "Birdshome@cnblogs.com" >
</ Head >
< Body Style = "Border: 2px solid red; overflow: hidden; margin: 0" >
< Div Style = "Border: 2px solid yellow; width: 100%; Height: 100%; overflow: auto ;" >
< Form >
< Div Style = "Width: 800; Height: 800; Border: 2px solid blue" > </ Div >
</ Form >
</ Div >
</ Body >
</ Html >

A very good self-made scroll bar will come out, but if you pull the vertical scroll bar to the end, you will find a page layout defect, after the form, ie adds a <br> display by default, for example:

Do you want to move the DIV to form? Sample Code:

< Form >
< Div Style = "Border: 2px solid yellow; width: 100%; Height: 100%; overflow: auto ;" >
< Div Style = "Width: 800; Height: 800; Border: 2px solid blue" > </ Div >
</ Div >
</ Form >

It is completely messy. See:

Why? I remember that, as I said before, to enable Div to automatically exit the scroll bar when overflow is set to auto, there is a condition. My experiments at the time showed that the percentage cannot be used on the width, but the percentage can be used on the height, if both the specified width and height are used, the scroll bar is displayed when the over condition is met. At that time, due to my limited lab samples, I came to this conclusion very inaccurate.

From the first figure, we can see that the width and height of the DIV are both percentage measurements, and the horizontal and vertical scroll bars are all out. The exact condition of whether the scroll bar can be obtained is whether its container relationship can be used to obtain the exact width and height values, whether or not the percentage is used for measurement. Of course, if the container Div uses a specified measurement, it is natural to exit the scroll bar. But what if the percentage is used? If the width and height of the parent container of the percentage measurement are fixed values or can be determined by its parent container, a scroll bar may appear. For example, because the width and height of the body are the exact values, the width and height of the DIV are both percentage measurements and the exact values can still be calculated. In Example 2, because the form element does not have width or height, the exact width and height values cannot be calculated if the element inside the form Element uses percentage measurement, therefore, the actual overflow status cannot be correct.

Let's go further and continue to talk about how to use HTML tags in disorder to control output results. Obviously, through the above explanation, we can only put the DIV on the first child of the body, but how can we get rid of the extra blank in Figure 1? Because the form label has a high priority during parsing, It is not sensitive to the well format when the label is used, that is to say, as long as <from> and </form> appear in pairs, check whether their positions are correct. So we changed the code to the following:

< Html >
< Head >
< Title > Layout demo </ Title >
< Meta Name = "Author" Content = "Birdshome@cnblogs.com" >
</ Head >
< Body Style = "Border: 2px solid red; overflow: hidden; margin: 0" >
< Div Style = "Border: 2px solid yellow; width: 100%; Height: 100%; overflow: auto ;" >
< Form >
< Div Style = "Width: 800; Height: 800; Border: 2px solid blue" > </ Div >
</ Div >
</ Form >
</ Body >
</ Html >

Note that the DIV and form are nested with each other, so that the HTML can get the UI we want, such:

Why do we need to hide the body's scroll bar and use Div to simulate it? Now let's talk about it.