Bolehkah Saya Membuat Iframe Mengisi Baki Ketinggian Bekas Menggunakan Hanya CSS?

Jadikan Iframe Sesuai 100% daripada Baki Ketinggian Bekas

Masalah:

Dalam membuat halaman web dengan kedua-dua sepanduk dan iframe, adalah wajar untuk iframe mengisi ketinggian halaman yang tinggal secara automatik sebagai penyemak imbas mengubah saiz. Adakah ini boleh dicapai semata-mata dengan CSS, tanpa JavaScript?

Penyelesaian:

Pada 2019, flexbox muncul sebagai penyelesaian optimum untuk senario ini. Flexbox menawarkan sokongan yang sangat baik merentas pelayar dan menyediakan cara yang berkesan untuk mengawal reka letak elemen halaman.

Menggunakan flexbox, anda boleh menentukan bekas induk bersaiz 100% dalam kedua-dua ketinggian dan lebar, dengan flex- arah ditetapkan kepada lajur. Ini menyusun elemen secara menegak.

Dalam bekas induk, cipta dua baris:

1. Baris Pertama: Berikan ketinggian tetap atau kandungan yang menentukan ketinggiannya .
2. Baris Kedua: Tetapkan sifat flex-grownya kepada 1 untuk menjadikannya mengembang untuk mengisi ruang yang tinggal.

Coretan Kod:

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>

Dengan persediaan ini, iframe dalam baris kedua akan melaraskan ketinggiannya secara automatik untuk menduduki ruang yang tinggal dalam halaman, walaupun semasa penyemak imbas diubah saiznya.

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