如何设置一个元素，使其使用父元素whilist上具有其他两个动态元素的剩余高度？

Question

因此，让我在标题中进行更多说明，我有一个固定的容器，其中包含3个元素，所有这3个元素都应动态更改，因为第一个和第二个元素优先于第三个元素，因此我需要这个占用其余的容器空间。

我已经尝试过使用flexbox，但是对于这个特殊问题，我似乎没有解决方法，（或者也许我只是不知道如何使用它）

我还尝试使用JS来获取h1和p的高度，然后使用此小功能从容器中减去它

document.getElementById('DescTitle').clientHeight;

但我不能让它工作...

<div class="Container" id="DescContainer">
    <h1 id="DescTitle">Title</h1>
    <p id="DescParagraph">A longer text</p>
    <div Class="Interior-Container">
    </div>
</div>

body {
    margin: 0;
    text-align: center;
}

.Container {
    height: 100vh;
    color: black;
}

.Container h1 {
    font-size: 8vh;
    margin-left: 3vw;
    margin-right: 3vw;
}

.Container p {
    font-size: 4vh;
    margin-left: 3vw;
    margin-right: 3vw;
}

.Interior-Container {
    background-color: black;  /*I'm only using this for testing porpuses*/
}

我几乎只想让“ Interior-Container”占据其余的视图高度，以便标题和段落保留下来，并且即使您更改窗口大小，该解决方案也能正常工作，因为我计划放置更多的动态对象根据最后一格的大小...

Answer 1

您可以使用flex来实现，但是为此您需要稍微更改CSS。 您需要设置diplay: flex; 和flex-direction: column; 在.Container类。 对于容器中的元素，如果要在内容适合的情况下使所有元素的高度相同，则可以使用min-height 。 对于容器中的第三个元素，设置flex: 1使其灵活。

https://www.w3.org/TR/css-flexbox-1/#flex-common

如果我正确阅读了您的问题，此CSS应该可以完成此工作：

 * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; text-align: center; } .Container { height: 100vh; color: black; display: flex; flex-direction: column; } .Container h1 { background-color: blue; min-height: 33%; } .Container p { background-color: orange; min-height: 33%; } .Interior-Container { flex: 1; background-color: black; } 

 <div class="Container" id="DescContainer"> <h1 id="DescTitle"> Title<br /> Title </h1> <p id="DescParagraph"> A longer text<br /> A longer text<br /> A longer text<br /> A longer text<br /> A longer text<br /> </p> <div Class="Interior-Container"> </div> </div>