javascript - 将屏幕分成 3 个部分

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

------------------------------------------------------------------------
                           Header section
------------------------------------------------------------------------
              Left Section        |         Right Section
                                  |        
            Table                 |           Table 
            of                    |            of
            Contents              |           contents  
                                  |
                                  |  
                                  |  submit

抱歉，我问的问题很新手，但我从未找到任何页面解释如何以上述格式分割屏幕。我在 stackoverflow 和其他论坛上询问了多个问题，但没有找到。

此外，右侧部分有一个名为“评论”的文本框，用户可以向其中提供输入，一旦他们点击提交按钮，他们的输入就会被捕获并显示在同一页面中。

不知道如何实现

Answer 1

通过使用flexbox，你可以简单地实现它。但有一个问题是，像 IE 11 这样的浏览器不支持 flexbox。因此，请检查兼容性问题并继续。

html, body, main {
  height: 100%;
  box-sizing: border-box;
  margin: 0;
}

main, header, section {
  text-align: center;
  box-sizing: border-box;
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
}

header {
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: green;
}

section {
  display: flex;
  flex: 1;
}

section div {
  width: 50%;
  background-color: yellow;
}

<main>
  <header>Header</header>
  <section>
    <div>Left</div>
    <div>Right</div>
  </section>
</main>