Question

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

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

如果我设置溢出：隐藏到.jumbotron，视频和聊天将被删除，这将阻止视频控件和聊天发送按钮。基本上我需要iframes调整到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

Answer 1

只需从height: 100vh

中删除.jumbotron即可

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

希望这是你要求的。

Answer 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>

Jumbotron div的溢出

2 个答案: