Автоматическая установка высоты iFrame для содержимого, только HTML5 или CSS

Question

Объяснение

Я столкнулся с проблемой на моем веб-сайте;У меня есть противоречивые таблицы стилей.Вместо того, чтобы вручную менять каждый класс, я бы хотел использовать другой подход, который, я надеюсь, мог бы применить к другим проектам в долгосрочной перспективе.После некоторых исследований лучше всего создать отдельную веб-страницу и использовать IFrame на исходной веб-странице, однако я бы не хотел, чтобы пользователи заметили какую-либо разницу.Из-за этого он должен быть бесшовным, а его высота автоматически подстраиваться под высоту содержимого на внешней веб-странице.Теоретически я мог бы применить CSS, чтобы сделать iFrame бесшовным, и установить высоту либо height:100%;, либо height:auto;, что в идеальном случае сделает высоту iFrame равной содержимому.

Однако обе настройки высоты неНе влияет на содержимое внутри самого iFrame, но с помощью контейнера iFrame, то есть height:100%; будет занимать 100% веб-страницы, на которой он отображается.Я видел ответы на похожие вопросы, однако все они включают в себя JavaScript для решения.Я бы хотел избежать javascript, так как я не только не получил образование в javascript, но я лично считаю, что может быть другой путь без привлечения другого языка программирования.

TLDR Другими словами,Я хотел бы создать полностью прозрачный iFrame, отображающий содержимое другой веб-страницы.Высота должна автоматически соответствовать высоте содержимого внутри.Конечный результат должен легко реализовать другую веб-страницу, чтобы пользователи не замечали, что она отличается от остальной веб-страницы.

Код

Я нашел полезный вопрос, который помог мне написать код, однако он не полностью работает как задумано.IFrame полностью заменяет всю веб-страницу вместо добавления на нее (пример ниже).Я не вставил свой точный код, я урезал его, чтобы сохранить только соответствующие части.

CSS

html, body, iframe { height: 100%; }
html { overflow: hidden; }

HTML

<iframe src="https://example.com/"  width="100%" scrolling="yes" frameborder="0">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>

Вывод

html, body, iframe { height: 100%; }
html { overflow: hidden; }

<iframe src="https://example.com/"  width="100%" scrolling="yes" frameborder="0">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>

Требуемый вывод

Чтобы показать желаемый вывод, я загрузил веб-страницу с iFrame и установил правила CSSсмоделировать то, что я хочу.Это не реальное решение.

    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;

    }
    #iFrame {
        width: 600px;
        margin: 5em auto;
        padding: 50px;
        background-color: #fff;
        border-radius: 1em;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        body {
            background-color: #fff;
        }
        #iFrame {
            width: auto;
            margin: 0 auto;
            border-radius: 0;
            padding: 1em;
        }
    }
    #Desired {
      background-color: white;
    }

<div id="iFrame">
    <h1>Example Domain</h1>
    <p>This domain is established to be used for illustrative examples in documents. You may use this
    domain in examples without prior coordination or asking for permission.</p>
    <p><a href="http://www.iana.org/domains/example">More information...</a></p>
</div>
<div id="Desired">
  <h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>
</div>

Спасибо всем, я с нетерпением ждал, что вы скажете.

РЕДАКТИРОВАТЬ Отредактированный пост