如何将屏幕拆分为 3 个水平 div [重复]答案

【问题标题】：How to split the screen in 3 horizontal divs [duplicate]如何将屏幕拆分为 3 个水平 div [重复]
【发布时间】：2020-03-19 17:25:36
【问题描述】：

我正在编写一个网站，我想将一个页面分成 3 个不同的部分：
一个用于标题+一个按钮，
一个用于内容，
一个用于文本输入。

问题是 div 没有填满屏幕的高度和宽度。第二个 div 也需要一个滚动条，因为他的内容可以变化。

我想用 CSS 解决问题，但一切都被接受

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Server Messaggistica</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div style="width:100vh; height: 100vh;">//container of the 3 divs
    <div style="width:100%; height: 15%;">//div1
      <h1>Bentornato utente</h1>
      <a href = "logout.php"><button class=button>LOG OUT</button></a>
    </div>
    <hr>
    <div style="width:100%; height: 70%; overflow-y: scroll; overflow-x: hidden;">//div2
      //php content
    </div>
    <hr>
    <div style="width:100%; height: 15%;">//div3
      <textarea name="messaggio" rows="3" cols="100"></textarea>
    </div>
  </div>
  </body>
</html>

【问题讨论】：

一般来说，不要使用height: 100vh;，而是使用 min-height （在平均网站上，你会遇到溢出问题）。 100vw 她也没有意义（默认情况下，Div 是块元素）。有用的文章（如果您的问题与“粘”到底部页脚有关）：css-tricks.com/couple-takes-sticky-footer

标签： html css

【解决方案1】：

您可以使用 CSS 中的 vh unit 执行此操作，它允许您指定容器相对于视口高度的高度。

body {
  margin: 0;
}
.vh-15 {
  min-height: 15vh;
}
.vh-70 {
  min-height: 70vh;
}

/* for illustration */
.bg-red   { background: red;   }
.bg-green { background: green; }
.bg-blue  { background: blue;  }
div       { color: white;      }

<div class='vh-15 bg-red'>   1: 15% </div>
<div class='vh-70 bg-green'> 2: 70% </div>
<div class='vh-15 bg-blue'>  3: 15% </div>

【讨论】：

【解决方案2】：

我会使用 flexbox 来解决这个问题。 flex 子项的值是相互关联的。我的基础是 100。不过，这些数字是任意的。您可以使用 700 和 150 来代替 70 和 15。

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.top,
.bottom {
  flex: 15;
}

.middle {
  flex: 70;
}

/****************** 
  Presentational
******************/

.middle { background-color: green; }
.middle::after { content: '2: 70%'; }
.top { background-color: red; }
.top::after { content: '1: 15%'; }
.bottom { background-color: blue; }
.bottom::after { content: '3: 15%'; }
.container > div { position: relative; }
body { margin: 0; }
.container > div::after {
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  color: white;
  display: block;
  font-family: sans-serif;
}

<div class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>  
</div>

【讨论】：