Remove the horizontal scroll bar from the frame]

For example, in the webpage, only the vertical scroll bar on the right is displayed, instead of the horizontal scroll bar at the bottom. This problem caused me to scratching my head for half a day.

In order to display the menu in the entire window, I used IFRAME instead of frame. In order to make the IFRAME window fit the size, I also used JavaScript code to make a judgment;

The code for inserting iframe is as follows (I have not set the width and height, and the width and height are controlled by JS Code. I will not describe it here)
<IFRAME src = "welcome.html" name = "workarea" align = "Middle" marginwidth = "0" marginheight = "0" allowtransparency = "true" application = "true" id =" workarea "scrolling =" Auto "> </iframe>

The scroll bar is set to auto automatically. When there are too many pages, the scroll bar will automatically appear;

The expected results were displayed, but not only the vertical scroll bar on the right was displayed, but the horizontal scroll of the left and right was also displayed, and the width of the content was adjusted, which was also the same; depressed; although there was no impact, but I feel so uncomfortable.

Someone said on the Internet that setting the CSS style of the body;
<Style type = "text/CSS">
Body {
Overflow-X: hidden;
}
</Style>

After trying it, I found that I couldn't do it. Some say that IE doesn't support it. I think it may be because my web page is XHTML. If the DTD in the header is removed, it is
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

However, I don't want to. Because all my web pages are based on W3C standards, I don't want to modify code standards because of this small feature;

I tried several other methods, but I couldn't do it. No matter how I set it, if there is more content, a horizontal scroll bar will appear;

Through the test, method 1 is obtained:

To set the body width, write it to the page contained in IFRAME, as shown below:
Body {
Width: 95%;
Margin: 0px;
Padding: 0px;
}

CSS is used to control the width. I didn't set 100%. The default value is 100%, but 95%. In this way, the horizontal scroll bar is no longer displayed because the width of the overall page is smaller than 100%, the vertical scroll bar still works;

After further introduction, method 2 is displayed:

Add
<Style>
HTML {overflow-X: hidden ;}
</Style>

Both methods can be used.