CSS + Flexbox + 高度 100%

Question

3

我遇到了一个问题，我正在使用GWT框架构建一个页面，我试图将某个元素的高度设置为100％，但无法成功。

类似这样：

<div id="main">
    <div id="1">
        <div id="2"> 
            ...
        </div>
    </div>
</div>

主要Div - 我无法更改代码，因为它是一个框架；

Div 1 - style=display:flex;

Div 2 - style=display:flex;flex-direction:column; height:100%;

以此类推..

如果我在chrome开发者工具中将主要div和div 1的高度设置为100％，则我的内容的高度也将是100％，否则不会。

问题是，如何在不更改主要div的情况下设置高度？因为我已经说过，我无法访问它...

- Lara

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scniro · Accepted Answer

看起来你想使用 flex: 1 规则。我理解你的 #main 元素有一个无法更改的高度，而你的最后一个子元素 <div> 应该填充内容。尝试以下代码并查看示例...

    <div id="main">
        <div id="one">
            <div id="two"> 
            </div>
        </div>
    </div>

    #one {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    
    #two { 
        flex: 1;
    }

注意 - 我已经更改了CSS选择器的ID。不确定您是如何处理它的，但请记住，如果您打算使用CSS选择器来定位它们，则ID不能以数字开头。 JSFiddle链接 - 工作示例。