Jumbotron div 溢出答案

【问题标题】：Jumbotron div's overflowingJumbotron div 溢出
【发布时间】：2016-07-27 12:31:37
【问题描述】：

我一直在努力解决这个问题。我想以完整的浏览器宽度和高度显示两个 iframe。这是 Boostrap 3 中的 .jumbotron 内部。这两个 iframe 是一个视频和一个聊天（我想“模仿”一个剧院模式）。

我终于能够对齐 div 等中的内容。但现在我面临这个问题，iframe 和聊天 div 溢出了 jumbotron。

如果我将 overflow:hidden 设置为 .jumbotron，视频和聊天会被切断，这会阻止视频控件和聊天发送按钮。基本上我需要 iframe 来适应 jumbotron，一切都会好起来的（100% 宽度和高度）。

应注意 iframe 均来自 twitch.tv 频道。

感谢您的耐心等待！

代码如下：

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>

如果我添加溢出：隐藏；到.jumbotron 不能正确控制这些东西。 https://snag.gy/UlewLH.jpg

【问题讨论】：

标签： html css iframe twitter-bootstrap-3 overflow

【解决方案1】：

只需从.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>

希望这是您的要求。

【讨论】：

是和否，如果我这样做，内容适合 .jumbotron ；但随后视频和聊天超出了窗口高度。我试图“全屏”显示内容。谢谢;)
好的，那么您想将聊天和视频放入 .jumbotron 吗？可以滚动吗？

【解决方案2】：

试试下面的代码，希望对你有用。

.jumbotron{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
.chat{
	height: 100vh;
}
.video{
	height: 100vh;
}
.nopadding{
    padding:0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="jumbotron">

<div class="col-sm-9 nopadding">
<!-- 16:9 aspect ratio -->
<div class="video embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://player.twitch.tv/?channel=lirik"></iframe>
</div>
</div>

<div class="col-sm-3 nopadding">
<!-- 16:9 aspect ratio -->
<div class="chat embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.twitch.tv/lirik/chat?popout="></iframe>
</div>
</div>

</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：