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

Question

I am using four DIV s: container, header, content and footer. 我正在使用四个DIV ：容器，页眉，内容和页脚。

Based on the text or images the content DIV is expanded but the header and footer div do not expand in IE7, IE8 and IE9 but works fine in Firefox, IE10 and IE11. 根据文本或图像，内容DIV被扩展，但页眉和页脚div在IE7，IE8和IE9中不会扩展，但在Firefox，IE10和IE11中可以正常工作。

HTML: HTML：

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

CSS 的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>

Any ideas? 有任何想法吗？

Answer 1

You have a fixed value on footer and header 您在footer和header上有固定值

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

When it has fixed value, the element won't expand. 具有固定值时，该元素将不会扩展。 The min-height could be a simple solution but a browser that doesn't support CSS2.0 won't process it right and could give you an unexpected result. min-height可能是一个简单的解决方案，但是不支持CSS2.0的浏览器将无法正确处理它，并且可能会给您带来意想不到的结果。

ANSWER UPDATED... 答案已更新...

I'm giving you an answer that you might have expected. 我给您一个您可能期望的答案。 I still don't know what you are trying to achieve, what kind of layout do you need, and etc. But with a wild guess, I tweaked this code. 我仍然不知道您要实现什么目标，需要哪种布局等等。但是，出于种种猜测，我调整了这段代码。 It's going to be the exact answer for you if what you wanted was making header and footer responsive to the content div. 如果您想要使内容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>

Try and see above code result and test how it expands as the content div gets smaller or bigger. 尝试查看上面的代码结果，并测试它随着content div变小或变大而如何扩展。

Answer 2

style.css 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>

I have posted my full code of my layout...i hope it will okey for you to undestand yourself and reply. 我已经发布了布局的完整代码...希望您能理解并回复我。

this page working fine in IE10,IE11 and firefox but not works in IE6,IE7 and IE8. 此页面在IE10，IE11和Firefox中工作正常，但在IE6，IE7和IE8中不工作。

what i am trying to achieve is? 我要达到的目标是？ when the content(width) of div is expand dynamically the header and footer div(width) also expand based on content(width). 当div的content（width）动态扩展时，页眉和页脚div（width）也会根据content（width）扩展。

When we scroll down the page on browser then that page need to get centre alignment. 当我们在浏览器上向下滚动页面时，该页面需要中心对齐。

i am the beginner. 我是初学者。

if you need further details post me.i will reply. 如果您需要更多详细信息，请发邮件给我。我会回复。

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