我一直很难解决这个问题。我想以完整的浏览器宽度和高度显示两个 iframe。这是来自 Boostrap 3 的 .jumbotron 内部。 这两个 iframe 是视频和聊天(我想“模仿”剧院模式)。
我终于能够对齐 div 等中的内容。但是现在我面临这个问题，iframe 和聊天 div 溢出了超大屏幕。
如果我将 overflow:hidden 设置为 .jumbotron，视频和聊天会被削减，这会阻止视频控件和聊天发送按钮。 基本上我需要 iframe 来适应 jumbotron，一切都会好的(100% 宽度和高度)。
请注意，iframe 均来自 twitch.tv channel 。
感谢您的耐心等待!
代码如下:
body {
font-weight: 300;
}
.jumbotron {
display: flex;
align-items: center;
background-size: cover;
color: blue;
text-shadow: 0.25px 0.25px 0.25px #000000;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
height: 100vh;
}
.twitchWrapper {
width: 100vw;
}
.twitchVideo {
width: calc(100% - 300px);
height: 100%;
}
.twitchChat {
width: 300px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.nomargin {
margin: 0 !important;
padding: 0 !important;
}<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="twitch.css">
</head>
<body>
<section class="jumbotron">
<div class="container nomargin">
<div class="row twitchWrapper">
<div class="twitchVideo embed-responsive embed-responsive-16by9 col-lg-9">
<iframe class="embed-responsive-item video" src="https://player.twitch.tv/?channel=lirik" frameborder="0" scrolling="no" ></iframe>
</div>
<div class="twitchChat embed-responsive embed-responsive-16by9 col-lg-3">
<iframe class="embed-responsive-item chat" src="https://www.twitch.tv/lirik/chat?popout=" frameborder="0" scrolling="no" ></iframe></div>
</div>
</div>
</section>
</body>
</html>如果我添加 overflow: hidden; .jumbotron 无法正确控制这些东西。 https://snag.gy/UlewLH.jpg
最佳答案
只需从 .jumbotron 中删除 height: 100vh
body {
font-weight: 300;
}
.jumbotron {
display: flex;
align-items: center;
background-size: cover;
color: blue;
text-shadow: 0.25px 0.25px 0.25px #000000;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
}
.twitchWrapper {
width: 100vw;
}
.twitchVideo {
width: calc(100% - 300px);
height: 100%;
}
.twitchChat {
width: 300px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.nomargin {
margin: 0 !important;
padding: 0 !important;
}<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="twitch.css">
</head>
<body>
<section class="jumbotron">
<div class="container nomargin">
<div class="row twitchWrapper">
<div class="twitchVideo embed-responsive embed-responsive-16by9 col-lg-9">
<iframe class="embed-responsive-item video" src="https://player.twitch.tv/?channel=lirik" frameborder="0" scrolling="no" ></iframe>
</div>
<div class="twitchChat embed-responsive embed-responsive-16by9 col-lg-3">
<iframe class="embed-responsive-item chat" src="https://www.twitch.tv/lirik/chat?popout=" frameborder="0" scrolling="no" ></iframe></div>
</div>
</div>
</section>
</body>
</html>希望这就是您所要求的。
关于html - 超大屏幕 div 溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38603464/