Bagaimana Saya Boleh Membuat Iframe Isi Ketinggian Halaman Baki Secara Dinamik dengan CSS Sahaja?

Pengurusan Ketinggian Halaman Dinamik untuk Iframes dengan CSS

Soalan:

Mencapai iframe yang lancar mengisi baki ketinggian halaman web dan melaraskan secara automatik kepada saiz semula penyemak imbas telah terbukti mencabar. Walaupun terdapat percubaan untuk menggunakan teknik ketinggian:100% dan jidar/lapik, bar skrol menegak yang tidak diperlukan berterusan disebabkan oleh iframe cuba untuk menduduki keseluruhan ketinggian halaman, termasuk pengepala. Bagaimanakah isu ini boleh diselesaikan semata-mata dengan CSS?

Jawapan:

Dikemas kini pada 2019:

Flexbox telah muncul sebagai penyelesaian yang paling boleh dipercayai dan disokong secara meluas untuk ini dilema.

Kod CSS:

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

Struktur HTML:

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

Dengan melaksanakan flexbox, iframe akan berkembang secara automatik untuk mengisi ruang yang tinggal di bawah pengepala. Ia akan melaraskan ketinggiannya secara dinamik apabila tetingkap penyemak imbas diubah saiz, memastikan reka letak yang responsif dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Iframe Isi Ketinggian Halaman Baki Secara Dinamik dengan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!