これらの2つの要素を重ならないようにするにはどうしたらいいですか？

VideoJSで私自身のストリーミングページを設定しています。この場合、チャットをすることです。この場合、Twitch chat iframeを横に並べてください。 This is what I have now。これらの2つの要素を重ならないようにするにはどうしたらいいですか？

問題は、ビデオ要素がチャットフレームの下にあることです。私はそれがチャットフレームが始まる場所を終了させたいので、彼らはうまく整列します。誰もがこれで私を助けることができたら、私は本当に感謝します。

StackOverflowの私を強制されているためにも、ここで私が思うになり、この記事内のコードを入れて..

HTML：

<head> 
    <link href="//vjs.zencdn.net/4.9.0/video-js.css" rel="stylesheet"> 
<script src="//vjs.zencdn.net/4.9.0/video.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script> 

</head> 
<div id="sidebar-wrapper"> 
    <iframe frameborder="0" scrolling="no" src="http://twitch.tv/test/chat?popout=" height="100%" width="350"> 
    </iframe> 
     </div> 
<div class="wrapper"> 
    <div class="videocontent"> 
<video id="videostream" class="video-js vjs-default-skin vjs-big-play-centered vjs-fullscreen" controls width="auto" height="auto"> 
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> 
</video> 
<script> 
videojs("videostream", {}, function(){ 
// Player (this) is initialized and ready. 
}); 
videojs('videostream').ready(function() { 
    this.hotkeys({ 
    volumeStep: 0.1, 
    seekStep: 5, 
    alwaysCaptureHotkeys: true 
    }); 
}); 
</script> 
</div> 
</div>

CSS：あなたが設定した

.video-js {padding-top: 56.25%; 
margin-right: 20px; 
} 
.vjs-fullscreen {padding-top: 0px} 

#wrapper { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled { 
    padding-left: 250px; 
} 

#sidebar-wrapper { 
    z-index: 10000; 
    position: fixed; 
    right: 250px; 
    width: 0; 
    height: 100%; 
    margin-right: -250px; 

    background: #000; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width: 250px; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
} 

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -250px; 
} 

/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media(min-width:768px) { 
    #wrapper { 
     padding-left: 250px; 
    } 

    #wrapper.toggled { 
     padding-left: 0; 
    } 

    #sidebar-wrapper { 
     width: 350px; 
    } 

    #wrapper.toggled #sidebar-wrapper { 
     width: 0; 
    } 

    #page-content-wrapper { 
     padding: 20px; 
     position: relative; 
    } 

    #wrapper.toggled #page-content-wrapper { 
     position: relative; 
     margin-right: 0; 
    } 

     #content 
     { 
      top: 0; 
      bottom: 0; 
      left: 0; 
      display: hidden; 
     }

出典

2016-06-02 Shadowfied

widthコンテナ（ウェブページ）のwidthの100％を取っているので、ビデオコンテナの100％になります。

機能を使用すると、チャットのwidth（350px）をコンテナのwidthから100％休止する必要があるため、この動作を意図したものにすることができます。

#videostream{ 
    width: calc(100% - 350px) !important; 
}

Updated Codepen。

出典

2016-06-02 09:30:53

大変ありがとうございます！完璧に動作します！ – Shadowfied

これらの2つの要素を重ならないようにするにはどうしたらいいですか？

答えて

関連する問題