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

回答

相關問題