Щоб висота div відповідала, він повинен бути всередині батьківського елемента з визначеною висотою, щоб отримати його відносну висоту. Якщо ви встановите висоту контейнера, що містить зображення та текстове поле праворуч, ви згодом зможете встановити висоту двох його дочірніх елементів приблизно на 75% і 25%.
Підходи:
- Спочатку створіть структуру HTML із трьома divами для створення прямокутної структури та додайте заголовок за допомогою тегу heading.
- Тепер установіть розмір шрифту за замовчуванням для всіх елементів і встановіть базову структуру для адаптивних div з фіксованою висотою та шириною.
Щоб динамічно налаштувати висоту <div> за допомогою JavaScript:
- Створіть елемент <div> з ідентифікатором.
- Використовуйте JavaScript, щоб вибрати <div> за його ідентифікатором.
- Встановити стиль. властивість height до потрібного значення висоти.
Установіть висоту <div> на 100% від його батьківського контейнера з висотою: 100%, або використовуйте висоту: 100vh; для повної висоти вікна перегляду, гарантуючи, що <div> охоплює все вікно браузера. Налаштуйте відповідно до ваших уподобань дизайну.
Приклади висоти та ширини CSS
- Установіть висоту та ширину елемента <div>: div { height: 200px; ширина: 50%; …
- Установіть висоту та ширину іншого елемента <div>: div { height: 100px; ширина: 500 пікселів; …
- Цей елемент <div> має висоту 100 пікселів і максимальну ширину 500 пікселів: div { max-width: 500px; висота: 100 пікселів;