Control in HTML elements, there is a special element form. We use it to collect form data and submit it to the server, and in theory it has no UI to render. Of course, if we follow the BODY element immediately after a form, this does not seem to see any UI rendering problems, but when the form exists in other elements, there is a problem.
What's the problem? Looking at the example below, I need to control the scroll bar of the page because of the layout of the page. I hide the body scroll bar, and then use a DIV element to "homemade" a scroll bar, the HTML code is as follows: <title>layout demo</title>
<meta name= "Author" content= "birdshome@cnblogs.com" >
<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>
Very good a homemade scroll bar came out, but if you pull the vertical scroll bar to the end, you will find a page layout defects, the original in the form after IE will default plus a <br> effect display, the following figure:
Do you want to move the div into the form? The code example is: <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>
The show is completely out of the picture, see below:
What is the effect of this? I remember what I said, to make Div. When overflow is auto, there is a condition for automatic scroll bar. My experiment at the time showed that it was not possible to use percentages as a metric on the width, but to use percentages on the height, which are the specified width and height and can be scrolled when over conditions are met. Since my experimental samples were limited at the time, I was not quite sure how to get this conclusion.
Because from the first diagram, we see that the width and height of the div are measured as percentages, while the horizontal and vertical scroll bars come out. The exact condition of whether or not the scroll bar can be obtained is the exact width and height value of the container relationship, whether or not the percentage is used as a measure. Of course, if the container div uses the specified metric, then it is natural for the scroll bar to be out. But what if it's a percentage? If the width and height of the parent container of the percentage metric are the values that are determined or can be determined by the parent container, then the scroll bar can appear. Example one, because the body width and height is the exact value, so the div width and height are percentage measures, still can calculate the exact value. For example two, because the form element does not have the width and the height, the elements within it can not calculate the exact width and height values, so the actual overflow state cannot be computed correctly if the element uses a percentage metric.
A bit further away, continue to say the use of random HTML tags to control the output effect of things. Obviously through the above explanation, we can only put the div to the body of the first child on, but in figure one of the more out of the blank how to get rid of it? This is because the form label itself is high priority in parsing, making it less sensitive to whether the label is in the well format format, that is, if there are <from> and </form> pairs appearing on the line, whether it is correct in position. So let's change the code like this: <title>layout demo</title>
<meta name= "Author" content= "birdshome@cnblogs.com" >
<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>
Notice that the div and form are nested together, so that HTML can get the UI we want to say, as shown in the following figure:
about why the body of the scroll bar hidden off, and then you use div to simulate? Have time to say it again.
