您如何准确填写网站的任何屏幕？答案

【问题标题】：How do you exactly fill out any screen with your website?您如何准确填写网站的任何屏幕？
【发布时间】：2020-10-14 09:21:43
【问题描述】：

我有以下问题：

我想创建一个网站，其中 2 个 div 填充整个屏幕，无论屏幕大小。通常，它有效，但前提是我不使用填充或边距。如果我使用其中任何一个，滚动条会显示，因为 div 需要更多空间。

我尝试降低高度百分比以适应顶部和底部的填充/边距。例如，如果我的原始尺寸为 70%，而我想要 5% 的边距/内边距，我将其更改为 60%，但仍然无法适应屏幕。

我知道我可以隐藏滚动条，但我希望 div 准确。有没有办法做到这一点？

在我的例子中，我希望顶级类的 div 占屏幕的 25%，而低级的 div 占屏幕的 75%。

index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/stylesheet.css">
    <title>Home - Planner</title>
  </head>
  <body>
    <div class="container">
      <div class="topper">
        <div class="header">
          <h1>HOME</h1>
          <hr class="short-hr">
          <h3>Planner</h3>
        </div>
        <hr class="wide-hr">
      </div>
      <div class="lower">
        <div class="card left">
          <h2>Einkaufsliste</h2>
        </div>
        <div class="card right">
          <h2>Kalender</h2>
        </div>
        <div class="card left">
          <h2>ToDo - List</h2>
        </div>
        <div class="card right">
          <h2>Einstellungen</h2>
        </div>
    </div>
    </div>
  </body>
</html>

样式表.css：

html, body {
  height: 100%;
  margin: 0px;
}

* {
  text-align: center;
  margin: auto;
}

.container {
  height: 100%;
}

.topper {
  height: 25%;
}

.header {
  width: 25%;
  height: 100%;
}

.lower {
  height: 75%;
}

.card {
  height: 35%;
  width: 40%;
  margin: 2.5%;
  border: 2.5pt solid #000000;
  border-radius: 15pt;
}

.left {
  float: left;
}

.right {
  float: right;
}

【问题讨论】：

标签： html css height

【解决方案1】：

你想要做的，很容易实现。只需更改 class .container 的 css。去掉 100% 的高度，给它一个绝对位置，上下左右均为 0。

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

随着 CSS 的更改，容器将占用所有可用空间。但是请注意，这样的使用是一个坏习惯，因为它只会是半响应的。你需要有足够的断点来防止小屏幕溢出。

* {
  text-align: center;
  margin: auto;
}

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.topper {
  height: 25%;
}

.header {
  width: 25%;
  height: 100%;
}

.lower {
  height: 75%;
}

.card {
  height: 35%;
  width: 40%;
  margin: 2.5%;
  border: 2.5pt solid #000000;
  border-radius: 15pt;
}

.left {
  float: left;
}

.right {
  float: right;
}

<div class="container">
  <div class="topper">
    <div class="header">
      <h1>HOME</h1>
      <hr class="short-hr">
      <h3>Planner</h3>
    </div>
    <hr class="wide-hr">
  </div>
  <div class="lower">
    <div class="card left">
      <h2>Einkaufsliste</h2>
    </div>
    <div class="card right">
      <h2>Kalender</h2>
    </div>
    <div class="card left">
      <h2>ToDo - List</h2>
    </div>
    <div class="card right">
      <h2>Einstellungen</h2>
    </div>
  </div>
</div>

【讨论】：