嵌套网格没有占据他 parent 网格的全部高度
Nested grid is not taking full height of his parent grid
我有这个问题，我不确定是否与 CSS 网格有关。我想要一个像这样的固定页脚的布局。
我面临的问题是，当 RIGHT 或 LEFT 的内容大于它们的 parents 时，parent 的高度不会增加，我以此结束。我想让 LEFT 和 RIGHT 部分根据它们的内容增加高度，以便它们各自的 background-colors 可见。
#app {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas: 'main' 'footer';
}
#app main {
grid-area: main;
overflow: auto;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: 'left right';
background-color: red;
}
#app main .main-left {
grid-area: left;
background-color: #ff8127;
border-right: 1px solid #e5e5e5;
display: grid;
grid-template-columns: 1fr 70% 1fr;
grid-template-rows: 100%;
}
#app main .main-left .logo {
grid-area: 1 / 1 / 2 / 4;
max-width: 100%;
max-height: 90%;
width: fit-content;
align-self: center;
justify-self: center;
}
#app main .main-left .text-logo {
grid-area: 1 / 2 / 2 / 3;
display: grid;
text-align: center;
font-size: 19px;
font-weight: 600;
color: black;
grid-template-columns: 1fr;
grid-template-rows: 300px;
align-content: center;
align-items: center;
}
#app main .main-left .text-logo .text {
display: grid;
}
#app main .main-left .text-logo p {
margin: 1.5em 0;
}
#app main .main-right {
grid-area: right;
background-color: blue;
border-left: 1px solid #e5e5e5;
}
#app footer {
grid-area: footer;
padding: 13px;
font-size: 13px;
background-color: white;
border-top: 2px solid #e5e5e5;
}
#app footer p {
margin: 0;
padding: 0;
font-weight: 600;
text-align: center;
color: #5a5a5a;
}
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="app">
<main>
<section class="main-left">
<img class="logo" src="https://w7.pngwing.com/pngs/505/824/png-transparent-logo-drawing-lion-lion-illustration-vertebrate-flower-fictional-character.png" alt="logo" />
<div class="text-logo">
<div class="text">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
</div>
</div>
</section>
<section class="main-right">RIGHT</section>
</main>
<footer>
<p>© 2022 Company</p>
</footer>
</div>
</body>
</html>
我能够调试您的代码，grid-template-rows 似乎影响了您网站的内容。
删除 grid-template-rows 日期：
#app main#app main .main-left .text-logo
因为如果您在行中固定或指定一些大小，您的内容将尝试适应该大小，所以在内容创建部分时我不使用它。
我有这个问题，我不确定是否与 CSS 网格有关。我想要一个像这样的固定页脚的布局。
我面临的问题是，当 RIGHT 或 LEFT 的内容大于它们的 parents 时，parent 的高度不会增加，我以此结束。我想让 LEFT 和 RIGHT 部分根据它们的内容增加高度，以便它们各自的 background-colors 可见。
#app {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas: 'main' 'footer';
}
#app main {
grid-area: main;
overflow: auto;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: 'left right';
background-color: red;
}
#app main .main-left {
grid-area: left;
background-color: #ff8127;
border-right: 1px solid #e5e5e5;
display: grid;
grid-template-columns: 1fr 70% 1fr;
grid-template-rows: 100%;
}
#app main .main-left .logo {
grid-area: 1 / 1 / 2 / 4;
max-width: 100%;
max-height: 90%;
width: fit-content;
align-self: center;
justify-self: center;
}
#app main .main-left .text-logo {
grid-area: 1 / 2 / 2 / 3;
display: grid;
text-align: center;
font-size: 19px;
font-weight: 600;
color: black;
grid-template-columns: 1fr;
grid-template-rows: 300px;
align-content: center;
align-items: center;
}
#app main .main-left .text-logo .text {
display: grid;
}
#app main .main-left .text-logo p {
margin: 1.5em 0;
}
#app main .main-right {
grid-area: right;
background-color: blue;
border-left: 1px solid #e5e5e5;
}
#app footer {
grid-area: footer;
padding: 13px;
font-size: 13px;
background-color: white;
border-top: 2px solid #e5e5e5;
}
#app footer p {
margin: 0;
padding: 0;
font-weight: 600;
text-align: center;
color: #5a5a5a;
}
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="app">
<main>
<section class="main-left">
<img class="logo" src="https://w7.pngwing.com/pngs/505/824/png-transparent-logo-drawing-lion-lion-illustration-vertebrate-flower-fictional-character.png" alt="logo" />
<div class="text-logo">
<div class="text">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
</div>
</div>
</section>
<section class="main-right">RIGHT</section>
</main>
<footer>
<p>© 2022 Company</p>
</footer>
</div>
</body>
</html>
我能够调试您的代码，grid-template-rows 似乎影响了您网站的内容。
删除 grid-template-rows 日期：
#app main#app main .main-left .text-logo
因为如果您在行中固定或指定一些大小，您的内容将尝试适应该大小，所以在内容创建部分时我不使用它。