Переполнение Jumbotron div

У меня было трудное время, пытаясь исправить это. Я хочу отобразить два фрейма с полной шириной и шириной браузера. Это внутри .jumbotron от Boostrap 3. Два iframe - это видео и чат (я хочу «имитировать» режим theathre).Переполнение Jumbotron div

Я, наконец, смог выровнять материал в divs и т. Д. Но теперь я столкнулся с этой проблемой, iframe и chat div переполнены jumbotron.

Если я установил переполнение: скрыто до .jumbotron, видео и чат вырезаны, это блокирует элементы управления видео и кнопки отправки чата. В принципе мне нужны фреймы, чтобы приспособиться к jumbotron, и все будет в порядке (100% ширина и высота).

Следует учитывать, что фреймы являются как каналом twitch.tv.

Благодарим за терпение!

Heres код:

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

Просто удалите height: 100vh из .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>

Надежда это то, что вы просите.

источник

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

ответ

Смежные вопросы