Question

假设我必须遵循代码 -

<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中产生以下结果：

ruroh

在IE中，没关系。问题是，我如何使用'height：100％'以便它看起来像IE在所有浏览器中呈现它的方式？

编辑：以下是IE9中的结果（对我而言）这是我希望它在使用height的所有浏览器中看起来像：100％。这甚至可能吗？

enter image description here

Answer 1

使用height:100%

为内部div设置margin:5px时会出现问题

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

查看工作演示：http://jsfiddle.net/GVLNW/2/

Answer 2

嗯..它在我的所有浏览器中看起来都一样

Firefox 5.0和3.6.18
Safari 5.0.5
IE 9和8和7
Opera 11.01
Chrome 13.0.782.41 在http://jsfiddle.net/gaby/hPYEL/

Answer 3

我的Safari 5.0.4，Chrome 13.0.782.41和FF 3.5副本上的第一张图片看起来很像。这是预期的行为，但我不确定Gaby和Yanir为什么会这样做。

设置height:100%的另一种方法是将top，left，right和bottom值设置为几个绝对定位div 1}} 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>

请参阅http://jsfiddle.net/gCqqn/

在非ie浏览器上使用填充或边距时使用“height：100％”或“width：100％”？

3 个答案: