Question

在下面的小提琴中：

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

然后，在那个黄色容器中，我有另一个子div（红色），我想占用与其父级一样多的垂直空间。似乎我无法设置height因为父元素只有min-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>

Answer 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/ 我是根据这个用例

制作的

Answer 2

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

我已将内部内容更改为position: absolute

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

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

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

这样做效果更好，并没有给你页脚悲伤：http://jsfiddle.net/6qF7Q/9/

如何根据父母的最小高度获取子元素的大小？

2 个答案: