float:left方式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面直播测试</title>
</head>
<body>
<div id="top" style="100%;height:100px">
<div style="100%;height:100%;background-color:lightcoral"></div>
</div>
<div style="100%;height:1000px">
<div id="left" style="10%;height:1000px;background-color:lightgreen;float:left;"></div>
<div id="right" style="90%;height:1000px;background-color:lightgray;float:left;">
<!--<iframe style="100%;height:1000px;" id="channelId" src=""></iframe>-->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
//$(function () {
// let iframe = window.document.getElementById("channelId");
// iframe.allow = "microphone;camera;midi;encrypted-media;";
//});
</script>
</body>
</html>