IE7，IE8和IE9中的DIV没有扩展

Question

我正在使用四个DIV ：容器，页眉，内容和页脚。

根据文本或图像，内容DIV被扩展，但页眉和页脚div在IE7，IE8和IE9中不会扩展，但在Firefox，IE10和IE11中可以正常工作。

HTML：

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

的CSS

<style>
body {
    height:100%;
    margin-left: 0;
    margin-top: 0;
    padding:0;
    width:100%;
    position: relative;
    display:inline-block;
}

#header {
    top:0px;
    height:75px;
    width:100%;
}

#container {
    display:table;
    width:100%;
    height:100%;
}

#content {
    width:100%;
    height:auto;
}

#footer {
    top:5px;
    bottom:0px;
    height:45px;
    width:100%;
}
</style>

有任何想法吗？

Answer 1

您在footer和header上有固定值

#footer
{
    top:5px;
    bottom:0px;
    /*height:45px;*/
    width:100%;
}
#header
{
    top:0px;
    /*height:75px;*/
    width:100%;
}

具有固定值时，该元素将不会扩展。 min-height可能是一个简单的解决方案，但是不支持CSS2.0的浏览器将无法正确处理它，并且可能会给您带来意想不到的结果。

答案已更新...

我给您一个您可能期望的答案。 我仍然不知道您要实现什么目标，需要哪种布局等等。但是，出于种种猜测，我调整了这段代码。 如果您想要使内容header和footer响应于content div，那么它将为您提供确切的答案。

 body { margin-left: 0; margin-top: 0; padding:0; } #header { top:0px; width:100%; height:75px; position:absolute; background-color:#eaeaea; } #content { display:table; padding:75px 0 45px; height:150px; position:relative; } #footer { bottom:0px; width:100%; height:45px; position:absolute; background-color:#1d1d1d; }

 <!DOCTYPE html> <html> <head> </head> <body> <div id="content"> <h3>Expanding as you expected....</h3> <h5> * Try remove these h3 and h5 element. <br/> the result will be nothing on your screen because no dimension is given to content div. </h5> <div id="header"></div> <div id="footer"></div> </div> </body> </html>

尝试查看上面的代码结果，并测试它随着content div变小或变大而如何扩展。

Answer 2

style.css

      body
        {
            height:100%;
            margin-left: 0;
            margin-top: 0;
            padding:0;
            width:100%;
            position: relative;
            display:inline-block;
        }
        .header
        {
            top:0px;
            height:75px;
            width:100%;
        }
        .container
        {
            display:table;
            width:100%;
            height:100%;
        }
        .content
        {
            width:100%;
            height:auto;
        }
        .footer
        {
            top:5px;
            bottom:0px;
            height:45px;
            width:100%;
        }

**index.xhtml**


   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:pm="http://primefaces.org/mobile"
    >
<f:view>
 <h:head>
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
 </h:head>
 <h:body>
  <div class="container"> 

   <div class="header" class="ui-layout-unit-header ui-widget-header">    
        <ui:include src="${ModuleGenerator.headerPageh}" />
   </div>

   <div class="content" class="ui-panel-content ui-widget-content">
        <ui:include src="/pages/system/homeContent.xhtml"/>
   </div>  

   <div class="footer" class="ui-layout-unit-footer ui-widget-header">
        <ui:include src="${ModuleGenerator.headerPageh}" />
   </div>

</div>

  </h:body>
  </f:view>
</ui:composition>

我已经发布了布局的完整代码...希望您能理解并回复我。

此页面在IE10，IE11和Firefox中工作正常，但在IE6，IE7和IE8中不工作。

我要达到的目标是？ 当div的content（width）动态扩展时，页眉和页脚div（width）也会根据content（width）扩展。

当我们在浏览器上向下滚动页面时，该页面需要中心对齐。

我是初学者。

如果您需要更多详细信息，请发邮件给我。我会回复。

IE7，IE8和IE9中的DIV没有扩展

问题描述

2 个解决方案

解决方案1
3 2015-04-28 07:31:03

解决方案2
0 2015-04-29 01:40:53

IE7，IE8和IE9中的DIV没有扩展

问题描述

2 个解决方案

解决方案1 3 2015-04-28 07:31:03

解决方案2 0 2015-04-29 01:40:53

解决方案1
3 2015-04-28 07:31:03

解决方案2
0 2015-04-29 01:40:53