Попытка изменить размер div в процентах от всей страницы

Попытка сделать высоту div в процентах от высоты тела. Я использую загрузочную версию 5.3. Я могу сделать элемент body 100% видимым. Однако все остальные элементы div имеют одинаковый размер — 24 пикселя. Я пытаюсь охватить всю высоту страницы. Следующее не работает. Я просмотрел несколько других постов, посвященных этому вопросу, но пока ни один из них мне не помог. Что мне не хватает? Выдуйте если полный код.

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
<style>
  html {
    height: 100%;
  }
  
  body {
    min-height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

<body>
  <div class = "container-fluid">
    <div class = "row">
      <div class = "col-12" style = "height: 5%; background-color: blueviolet">
        header
      </div>
    </div>
    <div class = "row" style = "height: 86.5%; background-color: aliceblue">
      <div class = "col-12">main</div>
    </div>
    <div class = "row" style = "height: 1.9%; background-color: green">
      <div class = "col-12">thin banner</div>
    </div>
    <div class = "row" style = "height: 6.56%; background-color: darkslategray">
      <div class = "col-12">footer</div>
    </div>
  </div>
</body>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</html>

Вместо vh следует использовать единицы %. тогда нет необходимости устанавливать высоту тела или HTML равным 100%

— 17.07.2024 23:39

html css twitter-bootstrap

17.07.2024 23:32

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Насколько я понимаю, вам нужны div, чтобы заполнить всю страницу. Если да, то с flexbox это довольно просто.

Я изменил высоты, чтобы они были округлены равномерно, чтобы сделать их визуально более привлекательными и лучше видеть, что происходит. Кроме того, я удалил встроенные стили, потому что их легче поддерживать. И, как видите, я добавил к каждому уникальный класс .row для упрощения адресации.

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container-fluid {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  height: 10%;
  background-color: blueviolet
}

.main {
  height: 70%;
  background-color: aliceblue
}

.banner {
  height: 10%;
  background-color: green
}

.footer {
  height: 10%;
  background-color: darkslategray
}
</style>

<body>
  <div class = "container-fluid">
    <div class = "row header">
      <div class = "col-12" style = "">
        header
      </div>
    </div>
    <div class = "row main" style = "">
      <div class = "col-12">main</div>
    </div>
    <div class = "row banner" style = "">
      <div class = "col-12">thin banner</div>
    </div>
    <div class = "row footer" style = "">
      <div class = "col-12">footer</div>
    </div>
  </div>
</body>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</html>

Оба эти объявления необходимы:

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

.container-fluid {
  display: flex;
  flex-flow: column;
  height: 100%;
}

И обратите внимание: я изменил проценты, чтобы в сумме получить 100%.

18.07.2024 00:49

Использование единиц vh для установки высоты относительно высоты области просмотра. Это гарантирует, что элементы займут желаемые пропорции высоты области просмотра без необходимости явно устанавливать высоту родительских элементов.

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<body>
  <div class = "container-fluid">
    <div class = "row" style = "height: 8vh; background-color: blueviolet">
      <div class = "col-12">header</div>
    </div>
    <div class = "row" style = "height: 80vh; background-color: aliceblue">
      <div class = "col-12">main</div>
    </div>
    <div class = "row" style = "height: 4vh; background-color: green">
      <div class = "col-12">thin banner</div>
    </div>
    <div class = "row" style = "height: 8vh; background-color: darkslategray">
      <div class = "col-12">footer</div>
    </div>
  </div>
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

18.07.2024 08:49

Другие вопросы по теме

Как я могу расположить несколько загруженных изображений горизонтально (слева направо)?

Есть ли способ разместить диалог поверх модального диалога?

Переход по свойству Fill с линейным градиентом внутри SVG

Как центрировать элементы в файле .jsx?

Эффект заполнения текста, но контролируется в процентах

Почему следующий текст не сворачивается в многоточие?

Как показать список выбранных опций при наведении?

Гибкая ширина в таблице HTML

Можно ли использовать оператор else if для поэтапного раскрытия элементов с помощью JavaScript?

Можно ли изменить цвет элемента при наведении курсора мыши с html на Angular?

Попытка изменить размер div в процентах от всей страницы

Ответы 2

Другие вопросы по теме

Похожие вопросы