Html 你如何准确地在屏幕上填写你的网站？_Html_Css_Height

Html 你如何准确地在屏幕上填写你的网站？

html css

Html 你如何准确地在屏幕上填写你的网站？,html,css,height,Html,Css,Height,我有以下问题：我想创建一个网站，其中2个div填充整个屏幕，无论屏幕大小。一般来说，它是有效的，但前提是我不使用填充或边距。如果我使用其中任何一个，滚动条会显示，因为div需要更多的空间我试图降低高度百分比，以适应顶部和底部的填充/边距。例如，如果我原来的尺寸是70%，而我想要5%的边距/填充，我将其更改为60%，但它仍然无法适应屏幕我知道我可以隐藏滚动条，但我希望div是准确的。有办法做到这一点吗在我的例子中，我希望最高级别的div占屏幕的25%，较低级别的div占屏幕的75% ind

我有以下问题：

我想创建一个网站，其中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>

你想做的事很容易做到。只需更改

类.container的css即可。去掉100%的高度，给它一个绝对位置，顶部、底部、左侧和右侧为0

.container{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
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;
}