Блог

Главная - Вопросы по программированию - Как вы точно заполняете любой экран на своем веб-сайте?

Как вы точно заполняете любой экран на своем веб-сайте?

#html #css #height

#HTML #css #высота

Вопрос:

У меня следующая проблема:

Я хочу создать веб-сайт, на котором 2 раздела заполняют весь экран, независимо от размера экрана. Как правило, это работает, но только если я не использую отступы или поля. Если я использую любой из них, полоса прокрутки отображается из-за того, что div требует больше места.

Я попытался уменьшить процент высоты, чтобы учесть отступы / поля вверху и внизу. Например, если у меня был исходный размер 70%, и я хотел 5%-ное поле / отступ, я изменил его на 60%, но он все равно не поместился на экране.

Я знаю, что мог бы просто скрыть полосу прокрутки, но я хочу, чтобы divs были точными. Есть ли способ сделать это?

В моем случае я бы хотел, чтобы div с классом topper составлял 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;
}

Ответ №1:

То, что вы пытаетесь сделать, довольно легко достичь. Просто измените css вашего class .container . Удалите высоту 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>