Iframe이 CSS만으로 남은 페이지 높이를 동적으로 채우도록 하려면 어떻게 해야 합니까?

CSS를 사용한 Iframe용 동적 페이지 높이 관리

질문:

iframe을 달성하려면 웹페이지의 나머지 높이를 원활하게 채우고 브라우저 크기 조정에 자동으로 조정되는 것이 입증되었습니다. 도전적이다. 높이:100% 및 여백/패딩 기술을 사용하려는 시도에도 불구하고 iframe이 헤더를 포함하여 전체 페이지 높이를 차지하려고 시도하기 때문에 불필요한 수직 스크롤 막대가 지속됩니다. CSS만으로 이 문제를 어떻게 해결할 수 있습니까?

답변:

2019년 업데이트:

Flexbox 는 이를 위해 가장 안정적이고 널리 지원되는 솔루션으로 떠올랐습니다. 딜레마.

CSS 코드:

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

HTML 구조:

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

flexbox를 구현하면 iframe이 헤더 아래 남은 공간을 채우기 위해 자동으로 확장됩니다. 브라우저 창의 크기가 조정되면 높이가 동적으로 조정되어 반응성이 뛰어나고 시각적으로 보기 좋은 레이아웃이 보장됩니다.

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