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

Question

我读了很多其他问题，但不知道如何将解决方案应用到我的问题中。

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

详细信息：

1. 一个必要的结果是不放置浏览器滚动条
2. 在生产中，它是一个DIV，包含一个FLASH对象，其宽度和高度均为浏览器的100%
3. 不完全确定哪种HTML版本最适合用于嵌入FLASH。尽管如果有必要，我可以用另一个问题来解决这个问题

JSFiddle代码示例：

1. 这显示蓝色内容框应如何正常显示

     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>
   

2. 这显示当元素添加到顶部时，底部的蓝色框会发生什么

     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>
   

Answer 1

这是您想要的解决方案吗？：

Html:

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

CSS：

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%;
}