Question

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

对不起，我要问的是非常新手，但是我没有找到任何页面解释如何以上述格式拆分屏幕。我在stackoverflow和其他论坛上遇到了多个问题，但是没有找到一个问题。

此外，在右侧部分，有一个名为“注释”的文本框，用户可以在其中输入输入内容，一旦单击“提交”按钮，则应将其输入内容捕获并显示在同一页面中。

我不确定如何实现

Answer 1

您可以使用以下布局来解决此问题：

.container {
position: absolute;
width: 100%;
height: 100%;
}

.top {
width: 100%;
height: 20%;

background-color:green;
}

.bottom {
width: 100%;
height: 80%;
}

.split {
width: 50%;
height: 100%;
float: left;
}

.left {
background-color: yellow;
}

.right {
background-color: red;
}

<div class="container">
  <div class="top">Top</div>

  <div class="bottom">
    <div class="left split">left</div>
    <div class="right split">right</div>
  </div>
</div>

另一种方法是使用flexbox，但是flexbox有一种有趣的方式来调整子项的大小。

Answer 2

通过使用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>

将屏幕分为3个部分

2 个答案: