DIV 在 IE7、IE8 和 IE9 中没有扩展答案

【问题标题】：DIV is not expanding in IE7, IE8 and IE9DIV 在 IE7、IE8 和 IE9 中没有扩展
【发布时间】：2015-04-28 07:24:50
【问题描述】：

我使用了四个DIVs：容器、页眉、内容和页脚。

基于文本或图像，内容 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>

有什么想法吗？

【问题讨论】：

他需要纵向扩展还是横向扩展？因为页脚和页眉的高度固定为 45pc 和 75px。
我需要横向展开
我不明白为什么它不工作，因为宽度是100% 所以它应该工作
@Vinc199789..我不知道为什么内容div展开时页眉和页脚宽度没有扩大。

标签： html css

【解决方案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 变小或变大而扩展。

【讨论】：

感谢您的回复.....我的确切问题是扩展内容div时页眉和页脚的宽度没有动态扩展。
@VenkatRaj 是吗？如果你想让你的header和footer从0px开始到Npx作为你content的扩展，你为什么把width:100%放在第一位？我想帮助你，但我不知道你在想什么样的布局。
@VenkatRaj stackoverflow.com/questions/13043393/… 。看看那个链接，特别是第一个答案
@VenkatRaj 给我你的完整 html 代码，包括 doctype 的声明。

【解决方案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) 动态展开时，header 和 footer div(width) 也会根据 content(width) 展开。

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

我是初学者。

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

【讨论】：