The problem with iframe

normal web pages such as
a.html :

<body>
    <div></div>
</body>

when the height of the div is higher than the screen display, a scroll bar appears on the right side, and the body will be pushed open to the same height as the div. When you click the page button to make the height of the div smaller, the height of the body will also become smaller.
question when a.html is introduced by b.html through iframe,

in iframe, when the div in a.html is changed from 2000px to 200px, its body is still 2000px, so that div is only as high as 200px, but there are scrollbars on the right. How to solve this problem?

Mar.05,2021

The

problem means that for a normal individual html page, the body will become larger as the div grows and the div will become smaller, but if you embed this web page in the iframe, you open the browser to see that the body, under the iframe will grow larger but not smaller as the div gets bigger, but not smaller as the div becomes smaller
solution: add:

to the sub-page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

iframe can only update the height manually, or refer to https://github.com/nprapps/py.


I have also encountered this problem. When importing iframe, the page inside has a scroll bar. One way, simple and rude, is to remove the scroll bar from the iframe.
refer to http://www.w3school.com.cn/ti.

Menu