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

Question

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

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

细节：

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