强制 grid-template-row 向上扩展

Question

我有一个布局，其中整个网格占据 100% 的视口高度（菜单顶部减去 7rem）和 100% 的视口宽度，覆盖在上面，我有一些文本框，见图 1下面，我遇到的问题是，当视口宽度变得太小而无法显示文本时，定义为“自动”的行会向下缩放，请参见下面的图 2，您可以看到网格正确扩展以将文本保留在框中，但是，它向下扩展，我希望它向上扩展，有什么建议吗？

codepen：https://codepen.io/roomwillow/pen/oNBawvR

图片 1（较长宽度的页面，注意网格在视口范围内的位置）：

图 2（宽度较短的页面，请注意网格现在如何溢出视口，而不是向上扩展）：

HTML：

<div id="landing">
        <h2 id="box_1_head">A Strong Heading</h2>
        <p  id="box_1_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div id="box_1_background"></div>

        <h3  id="box_2_text">Solutions for COVID-19 Production</h3>
        <a  id="box_2_button" class="button1" href="covid-solutions.hmtl">Learn More</a>
        <div id="box_2_background"></div>
        <video id="landing_video" width="1920" height="1080" autoplay muted loop>
            <source src="/content/black_white_test.mp4" type="video/mp4">
</div>

CSS：

#landing {
    height: calc(100vh - 7rem);
    display: grid;
    grid-template-columns: 2.5rem 3rem auto 7rem 1fr;
    grid-template-rows: 40% auto auto 6rem auto 3rem 10rem;
    overflow: hidden;
}
#box_1_head {
    margin-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    max-width: 27rem;
    grid-area: 2 / 2 / 3 / 4;
    z-index: 4;
}
#box_1_p {
    margin-left: 1rem;
    margin-bottom: 2rem;
    margin-right: 4rem;
    max-width: 30rem;
    grid-area: 3 / 2 / 5 / 4;
    z-index: 4;
}
#box_1_background {
    width: 100%;
    height: 100%;
    grid-area: 2 / 2 / 5 / 4;
    background-color: black;
    opacity: 70%;
}
#box_2_text {
    margin-left: 1rem;
    margin-top: 0.45rem;
    margin-bottom: 0.45rem;
    grid-area: 5 / 3 / 6 / 4;
    z-index: 4;
    max-width: 30rem;
}
#box_2_button {
    margin-left: 1rem;
    grid-area: 6 / 3 / 7 / 4;
    justify-self: start;
    align-self: start;
    z-index: 4;
}
#box_2_background {
    grid-area: 4 / 3 / 7 / 5;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 3;
    opacity: 40%;
}
#landing_video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-area: 1 / 1 / ;
}

Answer 1

如果您使用grid，您也应该使用它来为您的标题/导航保留空间。

那么，calc() 是不必要的，但clamp() 可能有用。

这是一个想法，额外的包装器可以是主体。

/* new / update */
.wrapper {
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr;
}
#landing {
    display: grid;
    grid-template-columns: 2.5rem 3rem auto 7rem 1fr;/* Is it not a lot for small screens ? */
    /*|*/grid-template-rows: clamp(40vmin, 0px, 30vh) auto auto 6rem auto 3rem 10rem;
}


/* yours */

#box_1_head {
    margin-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    max-width: 27rem;
    grid-area: 2 / 2 / 3 / 4;
    z-index: 4;
}
#box_1_p {
    margin-left: 1rem;
    margin-bottom: 2rem;
    margin-right: 4rem;
    max-width: 30rem;
    grid-area: 3 / 2 / 5 / 4;
    z-index: 4;
}
#box_1_background {
    width: 100%;
    height: 100%;
    grid-area: 2 / 2 / 5 / 4;
    background-color: black;
    opacity: 70%;
}
#box_2_text {
    margin-left: 1rem;
    margin-top: 0.45rem;
    margin-bottom: 0.45rem;
    grid-area: 5 / 3 / 6 / 4;
    z-index: 4;
    max-width: 30rem;
}
#box_2_button {
    margin-left: 1rem;
    grid-area: 6 / 3 / 7 / 4;
    justify-self: start;
    align-self: start;
    z-index: 4;
}
#box_2_background {
    grid-area: 4 / 3 / 7 / 5;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 3;
    opacity: 40%;
}
#landing_video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-area: 1 / 1 / ;
}

<div class="wrapper"><!-- or just body -->
  <header>Let's be any height if not 7rem<nav></nav></header>
  <div id="landing">
        <h2 id="box_1_head">A Strong Heading</h2>
        <p  id="box_1_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div id="box_1_background"></div>

        <h3  id="box_2_text">Solutions for COVID-19 Production</h3>
        <a  id="box_2_button" class="button1" href="covid-solutions.hmtl">Learn More</a>
        <div id="box_2_background"></div>
        <video id="landing_video"   autoplay muted loop>
            <source src="/content/black_white_test.mp4" type="video/mp4">
      </video>
</div>

关于clamp()https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()