Bagaimana untuk Membuat Iframe Mengisi Baki Ketinggian Bekasnya Tanpa JavaScript?

Jadikan Iframe Sesuai 100% Baki Ketinggian Bekas Tanpa JavaScript

Apabila mereka bentuk halaman web dengan kedua-dua sepanduk dan iframe, mencapai reka letak di mana iframe secara automatik melaraskan untuk mengisi ketinggian yang tinggal boleh menimbulkan cabaran.

Permulaan Percubaan

Menetapkan ketinggian iframe kepada "100%" nampaknya seperti penyelesaian yang mudah. Walau bagaimanapun, pendekatan ini cuba mengisi keseluruhan ketinggian halaman, termasuk kawasan sepanduk. Akibatnya, bar skrol menegak yang tidak diperlukan muncul.

Menggunakan Margin dan Padding CSS

Walaupun jidar dan padding CSS boleh mengisi ketinggian yang tinggal untuk elemen DIV dengan berkesan, strategi ini tidak berfungsi seperti yang diharapkan iframes.

Penyelesaian

Untuk menyelesaikan isu ini, pertimbangkan untuk menggunakan flexbox, modul reka letak CSS yang menawarkan penyelesaian yang boleh dipercayai untuk senario ini. Berikut ialah contoh kod menggunakan flexbox:

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>

Reka letak flexbox ini memastikan bahawa sepanduk (.baris pertama) mempunyai ketinggian tetap, manakala iframe (.baris kedua) mengembang untuk mengisi ketinggian yang tinggal. Sifat "flex-grow" mengarahkan iframe berkembang untuk menduduki mana-mana ruang yang tersedia.

Teknik ini dengan berkesan menjadikan iframe 100% daripada baki ketinggian bekas, menyesuaikan dengan lancar pada saiz semula penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Iframe Mengisi Baki Ketinggian Bekasnya Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!