Как расположить элемент, чтобы использовать оставшееся место на экране, не переполняя его [TailwindCSS] - PullRequest
Новая
       24

Как расположить элемент, чтобы использовать оставшееся место на экране, не переполняя его [TailwindCSS]

0 голосов
/ 16 мая 2019

Я использую TailwindCSS - фреймворк служебного класса - для стилизации своих элементов. Хотя это более общий вопрос CSS.

Мне не удается расположить коробку, чтобы получить оставшееся пространство без переполнения. Это мое настоящее состояние: 

<div class="flex flex-col h-screen mx-8 bg-white rounded p-4 mb-8">
    <!-- SUBTITLE -->
    <div>
        <h2 class="text-lg font-bold text-gray-700 pb-4">Subtitle</h2>
    </div>

    <div class="relative self-auto mb-8">

        <!-- ELEMENTS -->
        <a href="#">
            <img class="absolute z-10" style="top: 131px; left: 235px;"
                 src="{{ asset('some.svg') }}">
        </a>
    </div>
</div>

Вывод (без некоторых внутренних элементов):

Actual state

Как вы можете видеть, полоса прокрутки показывает, потому что div слишком большой. Для того, чтобы увидеть оба поля я должен прокрутить список:

End of current state

Это мой желаемый вывод:

Desired output

Заранее спасибо.

Fiddle

Ссылка.

Ответы [ 2 ]

1 голос
/ 17 мая 2019

Класс .h-screen равен 100vh..mb-8 имеет margin-bottom:2rem.Так что высота 100vh + 2rem.Вы можете использовать [calc][1], чтобы вычесть поле из высоты.

.h-screen{
  height:calc(100vh - 2rem)!important;
}

https://jsfiddle.net/c28145au/

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

0 голосов
/ 16 мая 2019

вы используете класс h-screen, у которого height: 100vh; удалить этот класс из div.

...