问响应高度与内容成正比
EN

Stack Overflow用户

提问于 2021-12-09 15:50:14

回答 1查看 37关注 0票数 0

我想得到一个响应高度在相对于我的内容。

例如，响应于内部文本的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- LINK ZU CSS FILES-->
    <link rel="stylesheet" href="css/basic.css">
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
    <div class="container1">
        <div class="grid-container">
            
            <div class="header">header</div>
            <div class="menu">menu</div>
            
            <div class="content-1">5</div>
            <div class="content-2" >
                <p class="content-text" >lorem500</p>
            </div>
          </div>
        </div>
</body>
</html>

和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;
}

我尝试了最小高度选项的内容2容器，但我不知道我错了。也许你还有其他的窍门和窍门，我怎么能处理这件事呢?所有的答案和提示。

html

css

回答 1

Stack Overflow用户

发布于 2021-12-10 07:32:12

我用

.content-2 {
    grid-area: content-2;
    height: fit-content;
}

“适配内容”解决了这个问题。我的容器-2相对于我的内容-2中的内容文本展开。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70292815

复制

相似问题

问响应高度与内容成正比
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应高度与内容成正比EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应高度与内容成正比
EN