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

Question

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

将我的主要内容 DIV 设置为 100% 高度可以正常工作，除非在 DIV 之外和浏览器顶部添加另一个元素。 100% 的 DIV 保留了浏览器的整个高度，并且不考虑浏览器顶部的新元素。这会导致 DIV 底部的内容被推到视野之外。

详情：

1. 一个必需的结果是不放置浏览器滚动条。
2. 在生产中，它是一个 DIV，包含一个 100% 宽度和浏览器高度的 FLASH 对象。
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%;
}