Html 使用'；身高：100%'；或'；宽度：100%'；当您在非ie浏览器上使用填充或边距时？_Html_Height_Css

Html 使用'；身高：100%'；或'；宽度：100%'；当您在非ie浏览器上使用填充或边距时？

html css

Html 使用'；身高：100%'；或'；宽度：100%'；当您在非ie浏览器上使用填充或边距时？,html,height,css,Html,Height,Css,假设我必须遵循以下代码- <body> <div id="outerdiv" style="border: 1px solid blue; height: 150px; width: 150px;"> <div id="div" style="height: 100%; border: 1px solid black; margin: 5px;"> <div id="innerdiv" style="height: 10

假设我必须遵循以下代码-

<body>
<div id="outerdiv" 
    style="border: 1px solid blue; height: 150px; width: 150px;">
    <div id="div" style="height: 100%; border: 1px solid black; margin: 5px;">
        <div id="innerdiv" style="height: 100%; 
             border: 1px solid red; margin: 5px;">
    </div>
</div>
</body>
</html>

这将在FF/Chrome中产生以下结果：

在IE中，这很好。问题是，我如何使用“高度：100%”，使其看起来像IE在所有浏览器中呈现的那样

编辑：以下是IE9中的结果（对于我）这就是我希望它在所有使用height:100%的浏览器中的外观。这可能吗

好吧。。它在我所有的浏览器中看起来都一样

Firefox 5.0和3.6.18
Safari 5.0.5
即9、8和7
歌剧院11.01
铬13.0.782.41 演示

我在Safari 5.0.4、Chrome 13.0.782.41和FF 3.5的副本上看到了第一张图片。这是预期的行为，但我不确定加比和亚尼尔为什么会有不同的看法

设置

高度的另一种方法是：100%

将

顶部

、

左侧

、

右侧

和

底部

值设置在几个绝对位置的

div

s中，如下所示：

<div id="outerdiv" 
style="border: 1px solid blue; height: 150px; width: 150px; position:relative;">
<div id="div" style="border: 1px solid black; top: 5px; bottom: 5px; left:5px; right:5px; position:absolute;">
    <div id="innerdiv" style="top: 5px; bottom: 5px; left:5px; right:5px; 
         border: 1px solid red; position:absolute;">
</div>

请参见

对于边距为5px的内部div，当您设置高度为100%时，会出现问题

必须以百分比为基础设置div的边距，并相应降低内部div的高度

请参阅工作演示：

您的代码在FF和Chrome上给出的结果与您提供的图像相同。你对什么浏览器有问题？是的，我也一直在得到第一张图片。我的结论是，使用高度或宽度=100%是完全不切实际的。。。我遗漏了什么吗？它们肯定有它们的实际用途（宽度：100%以上），只是边距和填充添加到框中，当您添加到100%时，会像在原始问题中一样溢出。