Iframe 无法正确响应宽度

Question

我在这里没有最好的标题，但我们开始吧。所以我正在制作一个音乐网站，我正试图在我的网站嵌入另一个页面到这个网站，但我有导航栏。

我试着在css中添加一堆不同的东西，使它不那么坏，如果有人有一个修复或任何方式使我的问题实际上是有意义的，请随意编辑或使用答案按钮。谢谢你。

对不起，如果它是混乱的，但是，这是我的代码:

body {
margin: 0;
padding: 0;
background-color: #181414;
color: white;
}
.embed {
margin-left: 25%;
border: 0px #ffffff none;
height: 100%;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #3f3c3c;
color: white;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: white;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #181414;
color: white;
}

<ul>
<li>
<div class="Logo" onclick="location.href = 'https://www.ltunes.gq/'" ;><img src="https://ltunes.gq/assets/Logo.png" width="50" height="50">LTunes</div>
</li>
<li><a href="/">Home</a></li>
<li><a href="music">Music</a></li>
<li><a class="active" href="radio">Radio</a></li>
<li><a href="podcasts">Podcasts</a></li>
<li><a href="lyrics">Lyric Search</a></li>
<li><a href="jukebox">Jukebox</a></li>
<li><a href="download">Download App</a></li>
</ul>
<div class="embed">
<iframe class="embed" src="https://ltunes.gq/radio" name="Music" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe>
</div>

<script async src="https://arc.io/widget.min.js#eMnAzx6E"></script>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

Answer 1

我是这样做的:

iframe {
height: 100vh;  
marginTop: 90px;
overflow: hidden;
width: 75%;
margin-left:25%;
border:0px #ffffff none; 
}

Answer 2

曾经遇到过同样的问题，我给iframe设置了这样的样式:

iframe {
height: calc(91vh - 90px), // 90px - height of the containing app header
marginTop: 90px, // 90px - height of the containing app header
overflow: hidden,
width: 100%,
}

不知道它是否会起作用，但可能值得一试