以下のコードで左は表示されますが、右は「接続が拒否されました。」と表示されます。どうしたらよろしいでしょうか?
因みに、Chrome拡張機能でサイトをブラウザ内で左右に表示し、左を日本語、右を英語といったことをやろうと思っています。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
width: 100%;
height: 100vh; /* ここを修正して、containerが画面全体を占めるようにします */
}
.left-content, .right-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
height: 100%; /* ここを追加して、左右のコンテンツが高さ100%になるようにします */
}
.center-bar {
width: 10px;
background-color: #000;
height: 100%; /* ここを追加して、center-barが高さ100%になるようにします */
}
.iframe-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%; /* ここを修正して、iframe-containerが高さ100%になるようにします */
}
.iframe-container iframe {
width: 100%;
height: 100%;
border: none;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>中央にバーを置き、左右にコンテンツを表示</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="left-content">
<div class="iframe-container">
<iframe src="https://magazine.techacademy.jp"></iframe>
</div>
</div>
<div class="right-content">
<div class="iframe-container">
<iframe src="https://academy.hackthebox.com"></iframe>
</div>
</div>
</body>
</html>