CSS만 사용하여 Iframe이 페이지의 남은 높이를 채우도록 하려면 어떻게 해야 합니까?

JavaScript 없이 Iframe 채우기 남은 높이를 원활하게 만들기

배너와 iframe을 사용하여 웹페이지를 디자인할 때 iframe이 필요할 수 있습니다. 나머지 페이지 높이 전체를 차지하도록 자동으로 크기가 조정됩니다. CSS를 사용하면 이를 달성하는 것이 가능합니다.

원래 iframe의 높이를 100%로 설정하는 것은 논리적인 것처럼 보였지만 결과적으로 iframe은 배너 높이를 포함하여 전체 페이지를 채우려고 했습니다. 이로 인해 불필요한 수직 스크롤 막대가 생겼습니다. 또한 DIV에서 CSS 여백과 패딩을 사용하여 남은 높이를 예약하는 것은 DIV에는 작동했지만 iframe에는 작동하지 않았습니다.

2019년 현재 최적의 솔루션은 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>

위 내용은 CSS만 사용하여 Iframe이 페이지의 남은 높이를 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!