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的浏览器不会对其进行正确处理，并且可能会给您带来意想不到的结果。

ANSWER UPDATED ...

我给你一个你可能想到的答案。我仍然不知道你想要实现什么，你需要什么样的布局等等。但是我猜错了，我调整了这段代码。如果您想要的是header和footer响应content div，那么它将成为您的确切答案。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

尝试查看上面的代码结果，并测试它在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的内容（宽度）动态扩展时，页眉和页脚div（宽度）也会根据内容（宽度）展开。

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

我是初学者。

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

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

2 个答案: