如何根据父元素的最小高度来调整子元素的大小？答案

【问题标题】：How to get a child element to size according to parent's min-height?如何根据父元素的最小高度来调整子元素的大小？
【发布时间】：2013-12-20 01:24:09
【问题描述】：

在下面的小提琴中：

http://jsfiddle.net/6qF7Q/1/

我有一个黄色的内容区域，它的 min-height 设置为 100% - 它是所有页面的背景 div，应该至少占据可用高度的 100%。如果有溢出，它会垂直扩展。

然后，在那个黄色容器中，我有另一个子 div（红色），我想占用与其父级一样多的垂直空间。看来我无法设置height，因为父元素只有min-height，并且在红色元素上设置最小高度也不起作用。

所以现在，黄色的行为符合我的意愿，但红色没有扩大。如何仅使用 CSS 来实现？

CSS：

.browser {
    background-color: blue;
    height: 600px;
    width: 200px;
    position: relative;
}
.innercontent {
    min-height: 100%;
    background-color: red;
    width: 100%;
    color: white;
    padding: 2px;

}
.content {
    background-color: yellow;
    width: 100%;
    min-height: calc(100% - 30px);
}
.footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: orange;
    height: 20px;
}

HTML：

<div class="browser">
    <div class="content">
        <div class="innercontent">
            This is the problem - I need this to take up 100% of the remaining yellow space, without setting the parent element's 'height' - only min-height is specified in the parent because I need to make sure that it takes up 100% of the height at least, but allow it to extend vertically if there's any overflow.  
        </div>
        should not see any yellow
    </div>
    <div class="footer"></div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

看看this

我添加了这个

*{
    box-sizing: border-box;
}
html, body {
  /* Make the body to be as tall as browser window */
  height: 100%;
}

并更改了您可以在小提琴中看到的一些属性

如果这就是你想要的，你应该阅读这篇文章 http://css-tricks.com/a-couple-of-use-cases-for-calc/ 我是根据这个用例做的

【讨论】：

只有在没有垂直溢出的情况下，将高度设置为 100% 才有效。看到这个：jsfiddle.net/6qF7Q/4
更改 .innercontent 高度：calc(100%);到最小高度：计算（100%）。 jsfiddle.net/6qF7Q/6

【解决方案2】：

我认为这可能会解决您的问题？

我已将内容更改为position: absolute

http://jsfiddle.net/6qF7Q/7/

如果您在黄色部分有文字，它将始终显示。此外，您将不得不做一些摆弄才能使您的页脚正确定位，因为您将有一个溢出的绝对元素。我认为全身position: relative 包装器将解决它。

P.S 如果您不希望 .content 显示，我不明白为什么需要 .content 和 .innercontent ？

这样效果更好，并且不会让您感到痛苦：http://jsfiddle.net/6qF7Q/9/

【讨论】：