在 XP 环境中尝试调整 Div 的大小时遇到​​困难。 IE8下

Posted

技术标签:

【中文标题】在 XP 环境中尝试调整 Div 的大小时遇到​​困难。 IE8下【英文标题】:Difficulty when trying to size Div's in An XP environment. under IE8 【发布时间】:2012-02-16 02:19:31 【问题描述】:

我正在尝试了解我的 Web 开发中的一个问题。我正在使用 IE 8 的 XP 环境中进行开发。为了解决问题,我开发了一个非常简单的网页。 它基本上由两个元素组成。一个body(红色背景)和一个Div(绿色背景)。我将 div 的高度设置为 100%。我希望 div 填充页面,因为高度和宽度都是 100%。但相反,我得到了一个很薄的 div,高度可能只有半厘米,几乎延伸到页面的左右边缘。如果我将 div 的高度指定为像素的绝对数量(例如 512px),我可以增加 div 的高度。但这对我不起作用,因为我需要适应具有不同屏幕分辨率的用户。有一些基本的东西我没有说到这里。有人能帮我吗?

这是页面的内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 <title>TEST</title>
 <link href="css/stylesheet.css" type="text/css" rel="stylesheet" media="all"/>
</head>

 <body>
   <div id="container">
    </div>
</body>
 </html>

这里是与页面关联的样式表。

     body
  
text-align:center;
    background-color:red; 

  
  #container
  

width:100%;
height:100%;
  background-color:green; 
 

【问题讨论】:

此问题并非 XP 和 IE8 独有。如果我没记错的话,它几乎适用于任何地方。 可能欺骗:***.com/questions/1366548/… 另一个骗子:***.com/questions/1575141/… 【参考方案1】:

密钥在另一个***帖子中找到:

Make a div fill the height of the remaining screen space

结果证明,将以下内容添加到我的 css 文件中是必不可少的:

body
,html

 height: 100%;
 margin: 0;
 padding: 0;


我还注意到嵌套 div 似乎效果不佳,并且取消嵌套它们使我可以更好地控制格式的行为方式。

【讨论】:

以上是关于在 XP 环境中尝试调整 Div 的大小时遇到​​困难。 IE8下的主要内容,如果未能解决你的问题,请参考以下文章

调整 div 大小时无法让 Google 地图高度自动调整大小

如何将图像适合 div? [复制]

jQuery - 动态 div 高度

JavaScript:如何调整div.card的大小

调整浏览器大小时图像超出 div

首次打开页面时如何为 div 的大小调整设置动画 [重复]