CSS만 사용하여 Iframe이 컨테이너의 나머지 높이를 채우도록 할 수 있나요?

컨테이너의 남은 높이를 100% 맞추도록 Iframe 만들기

문제:

배너 및 iframe을 사용하는 경우 브라우저 크기가 조정될 때 iframe이 나머지 페이지 높이를 자동으로 채우는 것이 바람직합니다. JavaScript 없이 CSS만으로 이것이 가능합니까?

해결책:

2019년에 Flexbox가 이 시나리오에 대한 최적의 솔루션으로 나타났습니다. Flexbox는 브라우저 전반에 걸쳐 탁월한 지원을 제공하며 페이지 요소의 레이아웃을 제어하는 ​​효과적인 수단을 제공합니다.

Flexbox를 사용하면 flex- 방향은 열로 설정됩니다. 이렇게 하면 요소가 수직으로 정렬됩니다.

상위 컨테이너 내에서 두 개의 행을 만듭니다.

1. 첫 번째 행: 고정 높이 또는 높이를 결정하는 내용을 지정합니다. .
2. 두 번째 행: flex-grow 속성을 1로 설정하여 확장하여 남은 공간을 채웁니다.

코드 조각:

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>

이 설정을 사용하면 두 번째 행의 iframe이 자동으로 조정됩니다. 브라우저 크기가 조정되더라도 페이지의 남은 공간을 차지하는 높이입니다.

위 내용은 CSS만 사용하여 Iframe이 컨테이너의 나머지 높이를 채우도록 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!