Html 如何使用CSS将页面划分为3个部分？

我这里有一个问题，我不知道怎么做，也就是把它分成3个部分。我可以给你们展示一个我想要它看起来是什么样子的例子，我只想知道如何把它分成3个部分

* { 保证金：0； 框大小：边框框； } html{ 身高：100%； 背景颜色：黄色； 溢出：隐藏； } 身体{ 身高：100%； 背景色：ddd； } 标题{ 身高：10%； 底部边框：3倍纯红； } h2，h3{ 文本对齐：居中； } 包裹{ } .window{ } .pane{ } 窗口1{ } 窗口2{ 标题 窗口1 你好

窗口2 窗格1 窗格2 html 标题

我模拟了这把小提琴，它基本上达到了你的参考形象。但是在你阅读这篇文章之前，请继续阅读，因为这可以节省你很多时间

当你有了一个你想要执行的设计时，先做你知道怎么做的所有事情。你用小提琴做得很好。 然后开始使用您喜爱的浏览器检查dom。确定父元素有多大。如果它们太小，则最终会生成扭曲的内容或剪裁的内容。如果发生这种情况，请从将父元素变大开始。在您的代码中，它没有填充可用空间。因此，添加高度：100%；fi我明白了。 把内容块放在正确的位置。所以把窗格放在适当的位置，让它们填满适当的空间。 现在，所有内容的大小和位置都正确了。因此，请将窗格推到右侧，并在不移动窗格的情况下使窗口居中。在这里，我必须研究并找到一篇关于如何做到这一点的伟大文章。我使用了一个简单的谷歌搜索如何将绝对位置的元素居中，并由此得出结论 然后我在窗口和第一个窗格中添加了边框，以实现边框效果。 现在我为什么要把这些都打出来？希望我的过程能帮助你看到下一次面对令人生畏的问题时你能做些什么。一件一件地做。先布局，然后是细节

---

<>你的代码越多，研究每种语言使用的概念模型越好，你会得到更好的基础。建立一个坚实的基础，你就能在任何时候把这些东西打出来。最好的运气。

试着先做一些事情。如果一些具体的东西不起作用，那么来这里试着找到答案。哦，伙计，非常感谢你，没有。我想让你为我做一切，但非常感谢。我会努力学习你当时是如何做到的：D干杯

<div id="wrap">
    <div id="window1" class="window" >
        <h3>Window 1</h3>
        <p>
            Helloo
        </p>
    </div>

    <div id="window2" class="window">
        <h3 class="window-banner">Window 2</h3>
        <div id="pane1" class="pane">
            Pane 1
        </div>
        <div id="pane2" class="pane">Pane 2</div>
    </div>
</div>
</body>

* {
    margin: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
    background-color: yellow;
    overflow: hidden;
}
body {
    height: 100%;
    background-color: #ddd;
}
#header {
    height: 10%;
    border-bottom: 3px solid red;
}
h2, h3 {
    text-align: center;
}
#wrap {
height: 100%;
position: relative;

}
.window-banner{
  position: absolute;
  margin: auto;
  left: 0px;
  right: 0px;
}
.window { 
  width:50%;
  position:relative;
  float:left;
  height:100%;

}
.pane { 
  width: 100%;
  position: relative;
  height: 50%;
  text-align: right;
 }
 #pane1{
   border-bottom:1px dashed;
 }
#window1 {
      border-right:1px solid;
}
#window2 {
  border-left:1px solid;
}