Bagaimana Saya Boleh Membuat Iframe Mengisi Baki Ketinggian Halaman Hanya Menggunakan CSS?

Jadikan Isian Iframe Ketinggian Yang Tertinggal Dengan Lancar Tanpa JavaScript

Apabila mereka bentuk halaman web dengan sepanduk dan iframe, seseorang mungkin menginginkan iframe untuk mengubah saiz secara automatik untuk menduduki keseluruhan ketinggian halaman yang tinggal. Mencapai ini dengan CSS adalah boleh dilaksanakan.

Pada asalnya, menetapkan ketinggian iframe kepada 100% nampaknya logik tetapi menyebabkan iframe cuba mengisi keseluruhan halaman, termasuk ketinggian sepanduk. Ini membawa kepada bar skrol menegak yang tidak diperlukan. Selain itu, menggunakan jidar CSS dan pelapik pada DIV untuk menempah ketinggian yang tinggal berfungsi untuk DIV tetapi bukan untuk iframe.

Sehingga 2019, penyelesaian optimum ialah flexbox. Ia menikmati sokongan meluas merentas pelayar:

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; }

<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>

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Iframe Mengisi Baki Ketinggian Halaman Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!