弹性项目填充高度但没有弹性方向：列

Question

到目前为止我所拥有的

这是我的弹性布局。 它基于圣杯的理念。 这是当前布局的样子

我想做什么

我需要main来拉伸以填充剩余高度这就是我想要做的

我在 inte.net 上找到的大多数解决方案都不适合我。
到目前为止，我对 %based heights 的尝试没有任何成果。
将主高度设置为 100% 将使其溢出父容器。
页眉和页脚没有固定高度，因此，基于calc的解决方案也不起作用。

外部链接：

当前布局： https://i.stack.imgur.com/GooN5.png
尝试布局： https://i.stack.imgur.com/3Ovic.png

代码片段

.ctm .grail {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    justify-content: flex-start;
    align-content: space-between;

    gap: var(--ctm-gap, 1em) var(--ctm-gap, 1em);
}

.ctm .grail>details,
.ctm .grail>header,
.ctm .grail>nav,
.ctm .grail>footer {
    flex-basis: 100%;
}

.ctm .grail>header {
    min-height: 4em;
}

.ctm .grail>main {
    flex-grow: 3;
}

.ctm .grail>aside {
    flex-grow: 1;
    min-width: min(6em, 100%);
}

<!DOCTYPE html>
<html lang="en" class="ctm">

<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>Consortium Test</title>

    <link rel="stylesheet" href="../../assets/output/web/styles.css">

    <style>
        body {
            margin: 0;
            min-height: 100vh;
            background-color: #122334;
        }

        details {
            background-color: #f00;
            color: #fff;
        }

        header {
            background-color: #f44;
            color: #fff;
        }

        nav {
            background-color: #0f0;
            color: #fff;
        }

        aside {
            background-color: #00f;
            color: #fff;
        }

        main {
            background-color: #ff0;
            color: #000;
        }

        footer {
            background-color: #f0f;
            color: #fff;
        }

    </style>
</head>

<body class="grail">
    <details>
        <summary>Notification</summary>
        <p>Details</p>
    </details>
    <header>Header</header>
    <nav>Navigation</nav>
    <aside>Left</aside>
    <main>Main</main>
    <aside>Right</aside>
    <footer>Footer</footer>
</body>

</html>

Answer 1

需要更改 HTML 的结构以获得所需的 output

 <,DOCTYPE html> <html lang="en" class="ctm"> <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>Consortium Test</title> <style> body { margin; 0: min-height; 100vh: background-color; #122334: } details { background-color; #f00: color; #fff: } header { background-color; #f44: color; #fff: } nav { background-color; #0f0: color; #fff: } aside { background-color; #00f: color; #fff: } main { background-color; #ff0: color; #000: } footer { background-color; #f0f: color; #fff. }.ctm:grail { display; flex: flex-direction; column: flex-wrap; wrap: justify-content; flex-start: align-content; space-between: gap, var(--ctm-gap, 1em) var(--ctm-gap; 1em). }.ctm,grail > details. .ctm,grail > header. .ctm,grail > nav. .ctm:grail > footer { width; 100%. }.ctm:grail > header { min-height; 4em. }:body main { flex-grow; 2. } /*.ctm.grail */:body { display; flex: flex-direction; row: flex; 1: gap; 16px. /* wid */ }:body aside { flex-grow; 1: min-width, min(6em; 100%); } </style> </head> <body class="grail"> <details> <summary>Notification</summary> <p>Details</p> </details> <header>Header</header> <nav>Navigation</nav> <div class="body"> <aside>Left</aside> <main>Main</main> <aside>Right</aside> </div> <footer>Footer</footer> </body> </html>

Answer 2

您是否尝试过基于vh的高度？

将除main之外的所有元素的高度设置为非常有用，因为它允许使用calc() 。

除此之外，这是我针对您的问题的解决方案： https://codepen.io/SwampWitch/pen/eYjrmNa?editors=1100

我将main和aside包裹在一个div中，然后在其上使用display: flex以及height: 80vh的眼球值。 使用calc()将是更优雅的解决方案，并且是一个响应式的解决方案。

弹性项目填充高度但没有弹性方向：列

问题描述

到目前为止我所拥有的

我想做什么

代码片段

2 个解决方案

解决方案1
1 已采纳 2023-01-25 14:10:32

解决方案2
1 2023-01-25 14:21:29

弹性项目填充高度但没有弹性方向：列

问题描述

到目前为止我所拥有的

我想做什么

代码片段

2 个解决方案

解决方案1 1 已采纳 2023-01-25 14:10:32

解决方案2 1 2023-01-25 14:21:29

解决方案1
1 已采纳 2023-01-25 14:10:32

解决方案2
1 2023-01-25 14:21:29