Страница HTML5: Сделайте все div полностью видимыми в браузере без прокрутки (Django)

Я хотел бы создать один indexview, содержимое которого полностью видно в любом браузере (мобильном и настольном) без необходимости прокрутки. Поэтому мне нужна любая функция, которая масштабирует содержимое страницы (сжимает html5 элементы) так, чтобы все элементы имели свое место на экране.

На данный момент я пытаюсь использовать CSS. Я пытался установить max-height: 94vh (6vh предназначены для моего navbar) моего главного контейнера. Но, к сожалению, это не работает.

  • включенные элементы maincontainer перекрываются... Поэтому мне приходится прокручивать
    • .
  • Возможно, это как-то связано с картами bootstrap?

Результат выглядит следующим образом: У меня есть нежелательная полоса прокрутки справа (я хотел бы видеть все шесть карт без прокрутки, поэтому карты должны быть меньше... в зависимости от размера экрана):

enter image description here

Вот мои шаблоны django:

  1. Базовый шаблон
  1. SS для моего базового шаблона
body {
background: white url("img/leaf.png");
}

h1 {
    color:  white;
  }

#testid{
    background-color: blue;
    max-height: 94vh;
}
  1. IndexView
{% extends "base.html" %}
{% load static %}
{% block page_content %}
<div class="row">
{% for rooms in rooms %}
    <div class="col-md-4">
        <div class="card mb-2">
            <img class="card-img-top" src="{% static rooms.image %}">
            <div class="card-body">
                <h5 class="card-title">{{ rooms.title }}</h5>
                <p class="card-text">{{ rooms.description }}</p>
                <label id="ActTmp{{ forloop.counter0 }}">{{ DBObjActhumidity.value }} °C</label> 
                <label id="Space{{ forloop.counter0 }}">  &nbsp; /&nbsp;&nbsp;    </label> 
                <label id="ActHumy{{ forloop.counter0 }}">{{ DBObjActhumidity.value }} %</label> &nbsp;
                <img id="windowimage{{ forloop.counter0 }}" src="{% static 'img/window_opened.png' %}" alt="Mein Bild" style="visibility: hidden; position: absolute;"><br>
                <a href="{% url 'rooms_detail' rooms.pk %}"
                   class="btn btn-primary">
                    Raumsteuerung
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% endblock %}

Есть ли у вас идеи, как я могу достичь своей цели? Спасибо за ответ!

Вернуться на верх