Jumbotron divs Überlauf

Ich habe es schwer gehabt, dies zu beheben. Ich möchte zwei iframes bei voller Browserbreite und -höhe anzeigen. Das ist innen .jumbotron von Boostrap 3. Die zwei iframes sind ein Video und ein Chat (ich möchte einen theathre Modus "nachahmen").Jumbotron divs Überlauf

Ich bin endlich in der Lage, die Sachen in den divs etc. auszurichten. Aber jetzt stehe ich vor diesem Problem, die Iframe und Chat Divs sind über das Jumbotron.

Wenn ich Überlauf: versteckt zu .jumbotron das Video und Chat sind abgeschnitten, dies blockiert die Video-Steuerelemente und Chat senden Schaltflächen. Im Grunde brauche ich die Iframes, um sich an das Jumbotron anzupassen und alles wird gut (100% Breite und Höhe).

Beachten Sie, dass die Iframes beide von einem twitch.tv-Kanal sind.

Vielen Dank für Ihre Geduld!

Heres der Code:

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>

Wenn ich Überlauf hinzufügen: hidden; zu .jumbotron kann das Zeug nicht kontrollieren. https://snag.gy/UlewLH.jpg

Quelle

2016-07-27 Sinestessia

Entfernen Sie einfach height: 100vh von .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>

Hoffnung ist das, was für Sie zu fragen.

Quelle

2016-07-27 04:06:17 Rohit

Ja und Nein, wenn ich tun, dass der Inhalt innerhalb .jumbotron passt; aber dann übersteigen Video und Chat die Fensterhöhe. Ich versuche, den Inhalt "Vollbild". Vielen Dank;) – Sinestessia

Okay, also möchten Sie den Chat und das Video in .jumbotron passen? ist es in Ordnung, Scroll zu haben? – Rohit

Probieren Sie den folgenden Code, ich hoffe, das wird für Sie arbeiten.

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

Quelle

2016-07-27 04:31:37

Antwort

Verwandte Themen