【HTML/CSS】iframeを全画面表示にする

コード

$ tree --dirsfirst
.
├── css
│   └── style.css
├── content.html
└── index.html
* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

iframe {
  border: none;
  width: 100%;
  height: 100vh;
}
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

<iframe src="content.html"></iframe>

</html>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>

</head>

<body style="background-color: red;">
</body>

</html>

 index.html を ブラウザで開くと、content.html の内容が全画面がに表示されます。

コメント

タイトルとURLをコピーしました