#html #css
#HTML #CSS
Вопрос:
я хочу получить отзывчивую высоту по отношению к моему контенту.
например, высота, соответствующая тексту внутри
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;Documentlt;/titlegt; lt;!-- LINK ZU CSS FILES--gt; lt;link rel="stylesheet" href="css/basic.css"gt; lt;link rel="stylesheet" href="css/main.css"gt; lt;/headgt; lt;bodygt; lt;div class="container1"gt; lt;div class="grid-container"gt; lt;div class="header"gt;headerlt;/divgt; lt;div class="menu"gt;menult;/divgt; lt;div class="content-1"gt;5lt;/divgt; lt;div class="content-2" gt; lt;p class="content-text" gt;lorem500lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;
и css:
*,*::before,*::after { box-sizing: border-box; } .grid-container { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 100px; grid-gap: 5px; grid-template-areas: '. header-text header-text header-text header-text menu menu .' '. content-1 content-1 content-1 content-1 content-1 content-1 .' 'content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2'; } .header { grid-area: header-text; } .menu { grid-area: menu; } .content-1 { grid-area: content-1; } .content-2 { grid-area: content-2; min-height: 100vh; }
я попробовал опцию минимальной высоты для контейнера content-2, но я не знаю, где я ошибся. может быть, у вас есть какие-нибудь другие советы и хитрости, как я мог бы справиться с этой штукой? 4 все ответы и подсказки
Комментарии:
1. вы хотите, чтобы высота вашего контента-2 была такой же, как и его содержимое? высота использования:подходит для содержимого
2. Добро пожаловать в Stack Overflow! Пожалуйста, проясните вашу конкретную проблему или добавьте дополнительные детали, чтобы выделить именно то, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.
3. я хочу иметь высоту растяжения относительно содержимого-текста внутри содержимого-2 div
Ответ №1:
Я решил проблему с помощью
.content-2 { grid-area: content-2; height: fit-content; }
«fit-контент» решил проблему. Мой контейнер-2 растягивается относительно содержимого-текста внутри моего содержимого-2