使用 DIV 填充屏幕的问题答案

【问题标题】：Issues with fill a screen with DIV使用 DIV 填充屏幕的问题
【发布时间】：2022-02-12 03:02:45
【问题描述】：

我需要制作一个包含 3 个 div 的屏幕。在 div one 中，我将显示一个视频，因此它需要以 16:9 的比例显示。然后我剩下两个div。在右边，我需要一个 div，它将填充视频 div 左侧的宽度。但 in 需要是一个方形 div。在视频 div 下方，我想要另一个使用该空间的 div。

我在想两列，两行和右侧的组合列。但这是明智的。我怎样才能用 div 做到这一点。

我现在在 HTML 中拥有的是：

 <div id="mainWrapper">
        <div id="streamDiv"><iframe width="90%" height="90%"  src="https://www.youtube.com/embed/SQzhybzvRaQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        <div id="chatDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis libero finibus mi finibus, in consectetur lorem finibus. Phasellus consequat at ipsum a efficitur. Nulla facilisi. Sed tempus mi vel mauris efficitur rhoncus. Maecenas tristique neque sit amet fringilla pharetra. Sed porta nec sem quis viverra. Curabitur at bibendum mauris, eget condimentum diam. Phasellus nunc nisi, mollis sed mauris a, maximus pharetra lacus. Vestibulum quis nibh ut lacus feugiat placerat at sed dui. Mauris eget vehicula urna. Fusce in dolor quis sapien rutrum porta sed sit amet elit. Aliquam feugiat nisl nec augue feugiat maximus.</div>
        <div id="pollDiv">poll</div>
</div>

在 CSS 中我有：

#mainWrapper {
    height: auto;
    margin-bottom: 30px;
}
#streamDiv {
    width: 1000px;
    background-color: aqua;
  height: 563px;
  display: block;
  float: left;
  position: relative;

}
#chatDiv {
    left: auto;
    width: 100% auto;
    height: 100% ;
    margin-left: 10px;
    margin-right: 10px;
    flex-grow: 1;
    margin-top: auto;
    background-color: #ff3333;
    height: 1000px auto;
    display: block;
}
#pollDiv {
    clear: both;
}

但这会给我这个：

enter image description here 但我想要： enter image description here

【问题讨论】：

标签： html css

【解决方案1】：

这似乎得到了你想要的结果。我将包装器更改为网格系统。你可以在这里阅读更多关于它的信息CSS: Grid Layout

#mainWrapper {
    height: auto;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: auto auto;
}
#streamDiv {
    width: 1000px;
    background-color: aqua;
    height: 563px;
    display: block;
}
#chatDiv {
    left: auto;
    width: 100% auto;
    height: 100% ;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: auto;
    background-color: #ff3333;
    height: 1000px auto;
    display: block;
}

#pollDiv {
    clear: both;
}

 <div id="mainWrapper">
        <div id="streamDiv"><iframe width="90%" height="90%"  src="https://www.youtube.com/embed/SQzhybzvRaQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        <div id="chatDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis libero finibus mi finibus, in consectetur lorem finibus. Phasellus consequat at ipsum a efficitur. Nulla facilisi. Sed tempus mi vel mauris efficitur rhoncus. Maecenas tristique neque sit amet fringilla pharetra. Sed porta nec sem quis viverra. Curabitur at bibendum mauris, eget condimentum diam. Phasellus nunc nisi, mollis sed mauris a, maximus pharetra lacus. Vestibulum quis nibh ut lacus feugiat placerat at sed dui. Mauris eget vehicula urna. Fusce in dolor quis sapien rutrum porta sed sit amet elit. Aliquam feugiat nisl nec augue feugiat maximus.</div>
        <div id="pollDiv">poll</div>
</div>

【讨论】：