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

Question

我阅读了很多其他问题，但无法弄清楚如何将解决方案纳入我的问题。

让我的主要内容DIV处于100％高度，除非在DIV之外添加另一个元素并且朝向浏览器顶部，否则完全正常。 100％的DIV保留了浏览器的全部高度，并没有考虑浏览器顶部的新元素。这会导致DIV底部的内容被推出视图。

详细说明：

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

JSFiddle代码示例：

1. This Shows how the Blue content box should appear normally

     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. This Shows what happens to the blue box at the bottom when an element is added to the top

     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

this是您理想的解决方案吗？：

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