Jumbotron div溢出

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

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

如果我设置溢出：隐藏到.jumbotron视频和聊天被削减，这阻止视频控件和聊天发送按钮。基本上我需要iframes来适应jumbotron，一切都会好的（100％宽度和高度）。

应该注意iframes都来自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 { 
 
\t width: 100vw; 
 
} 
 

 
.twitchVideo { 
 
\t width: calc(100% - 300px); 
 
\t height: 100%; 
 
} 
 

 
.twitchChat { 
 
\t width: 300px; \t 
 
} 
 

 
.nopadding { 
 
    padding: 0 !important; 
 
    margin: 0 !important; 
 
} 
 

 
.nomargin { 
 
\t margin: 0 !important; 
 
\t 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

来源

2016-07-27 Sinestessia

刚刚从.jumbotron

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 { 
 
\t width: 100vw; 
 
} 
 

 
.twitchVideo { 
 
\t width: calc(100% - 300px); 
 
\t height: 100%; 
 
} 
 

 
.twitchChat { 
 
\t width: 300px; \t 
 
} 
 

 
.nopadding { 
 
    padding: 0 !important; 
 
    margin: 0 !important; 
 
} 
 

 
.nomargin { 
 
\t margin: 0 !important; 
 
\t 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>

希望删除height: 100vh这是你要求的。

来源

2016-07-27 04:06:17 Rohit

是，也不是，如果我这样做，里面的内容.jumbotron配合;但随后视频和聊天超过窗口高度。我试图“全屏”的内容。谢谢;） – Sinestessia

好的，所以你想要适合聊天和视频在.jumbotron？滚动可以吗？ – Rohit

尝试下面的代码，我希望这会对你有用。

.jumbotron{ 
 
\t margin: 0px 0px 0px 0px; 
 
\t padding: 0px 0px 0px 0px; 
 
} 
 
.chat{ 
 
\t height: 100vh; 
 
} 
 
.video{ 
 
\t 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>

来源

2016-07-27 04:31:37

Jumbotron div溢出

回答

相关问题