Css 第一个DIV元素导致第二个DIV元素内100%高度的内容被推出屏幕

我读了很多其他的问题，但不知道如何解决我的问题

将我的主要内容DIV设置为100%的高度非常好，除非在DIV之外添加另一个元素并朝向浏览器顶部。100%的DIV保留了浏览器的整个高度，不考虑浏览器顶部的新元素。这会导致DIV底部的内容被挤出视图之外

详情：

一个必需的结果是不放置浏览器滚动条

在生产中，它是一个包含FLASH对象的DIV，该对象的宽度和高度均为浏览器的100%

不完全确定哪种HTML版本最适合嵌入FLASH。尽管如果有必要，我可以用另一个问题来解决这个问题 JSFIDLE代码示例：

正文{
背景色：#FFFFFF；
高度：自动；
保证金：0；
最小高度：100%；
溢出：隐藏；
}
#标志{
背景色：#000000；
高度：40px；
宽度：100px；
显示：无；
}
#第一小组{
背景色：#中交；
显示：块；
身高：100%；
位置：固定；
宽度：100%；
}
#面板内容{
背景：无重复滚动0 0#CCFFEE；
底部：0；
高度：50px；
位置：绝对位置；
宽度：100%；
}

正文{
背景色：#FFFFFF；
高度：自动；
保证金：0；
最小高度：100%；
溢出：隐藏；
}
#标志{
背景色：#000000；
高度：40px；
宽度：100px；
}
#第一小组{
背景色：#中交；
显示：块；
身高：100%；
位置：固定；
宽度：100%；
}
#面板内容{
背景：无重复滚动0 0#CCFFEE；
底部：0；
高度：50px；
位置：绝对位置；
宽度：100%；
}

您想要的解决方案是什么

Html:

---

100%以上的东西总是会超过100%…哈哈，是的。问题是，在考虑顶部元素后，我试图找出如何占据100%的剩余空间。我还没弄明白。为什么不把它放在100%高度元素中呢？我试过了，因为它导致了100%高度元素中的100%高度闪光对象出现同样的问题。来自@Gimmy的答案似乎是有效的。是的，它非常有效！我必须改变高度：计算（100%-50px）；至高度：计算（100%-40px）；虽然as 50导致浏览器底部出现空白。你有使用“calc”的好参考资料吗？我以前从未使用过它，也没有看到任何人在其他100%身高相关问题中提到过它。以下是浏览器兼容性列表：。这里是w3.org页面：看起来，它只是CSS标准的“候选推荐”。还不是一个标准。

  body {
    background-color: #FFFFFF;

    height: auto;

    margin: 0;

    min-height: 100%;

    overflow: hidden;

}

#logo {
    background-color: #000000;
    height: 40px;
    width: 100px;
    display: none;
}

#panel-1 {
    background-color: #CCCCCC;
    display: block;
    height: 100%;
    position: fixed;
    width: 100%;
}

#panel-content {
    background: none repeat scroll 0 0 #CCFFEE;
    bottom: 0;
    height: 50px;
    position: absolute;
    width: 100%;
}
<div>
<div id="header">
    <div id="logo"></div>
</div>
<div style="" id="content-wrapper">
    <div id="panel-1">
        <div id="panel-content"></div>
    </div>
</div>
</div>

  body {
    background-color: #FFFFFF;
    height: auto;
    margin: 0;
    min-height: 100%;
    overflow: hidden;
}

#logo {
    background-color: #000000;
    height: 40px;
    width: 100px;

}

#panel-1 {
    background-color: #CCCCCC;
    display: block;
    height: 100%;
    position: fixed;
    width: 100%;

}

#panel-content {
    background: none repeat scroll 0 0 #CCFFEE;
    bottom: 0;
    height: 50px;
    position: absolute;
    width: 100%;
}
<div>
<div id="header">
    <div id="logo"></div>
</div>
<div style="" id="content-wrapper">
    <div id="panel-1">
        <div id="panel-content"></div>
    </div>
</div>
</div>

<div>
    <div id="header">
        <div id="logo"></div>
    </div>
    <div>
        <div id="panel-1">
            <div id="panel-content"></div>
        </div>
    </div>
</div>

body
{
    background-color: #FFFFFF;
    height: auto;
    margin: 0;
    min-height: 100%;
    overflow: hidden;
}
#logo
{
    background-color: #000000;
    height: 40px;
    width: 100px;
}
#panel-1
{
    background-color: #CCCCCC;
    display: block;
    height: calc(100% - 50px);
    position: fixed;
    width: 100%;
}
#panel-content
{
    background: none repeat scroll 0 0 #CCFFEE;
    bottom: 0;
    height: 50px;
    position: absolute;
    width: 100%;
}