В HTML есть несколько способов задать высоту контейнера в зависимости от его содержимого. Ниже я приведу несколько возможных решений.
1. Использование свойства height: auto;
Это стандартное значение свойства height в CSS. Когда height установлено в auto, контейнер будет автоматически расширяться, чтобы вместить всё его содержимое. Например:
<div style="height: auto;">
<!-- Ваше содержимое здесь -->
</div>
2. Использование свойства height: fit-content;
Это новое значение свойства height, которое было добавлено в CSS3. Это значение позволяет контейнеру автоматически подстраиваться под высоту своего содержимого. Например:
<div style="height: fit-content;">
<!-- Ваше содержимое здесь -->
</div>
3. Использование свойства display: inline-block;
Когда вы устанавливаете свойство display в inline-block, контейнер будет автоматически подстраиваться под высоту его содержимого. Это подходит, если вы хотите разместить несколько контейнеров рядом друг с другом по горизонтали. Например:
<div style="display: inline-block;">
<!-- Ваше содержимое здесь -->
</div>
4. Использование JavaScript:
Если вам не подходит ни один из вышеперечисленных способов, вы можете использовать JavaScript для рассчета высоты контейнера на основе его содержимого и установки этой высоты явно. Ниже привожу пример использования JavaScript и jQuery:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
var container = $('#container');
var contentHeight = container.height();
container.css('height', contentHeight);
});
</script>
<div id="container">
<!-- Ваше содержимое здесь -->
</div>
В этом примере мы сначала получаем высоту содержимого контейнера при помощи метода .height() jQuery. Затем мы устанавливаем эту высоту в свойство height с помощью метода .css() jQuery.
Надеюсь, эти решения помогут вам задать высоту контейнера по его содержимому в HTML.