使用CSS的DIV跨浏览器解决方案

我无法在跨浏览器中获取div

height

（至少在Chrome和Firefox上应该是一样的）

下面是我想说的截图：

正如你所见，firefox与chrome相比存在高度差异。 我无法计算出它的高度，我需要一个更好的解决方案来解决这个问题

CSS:

​ HTML:

标题
身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

页脚

​

---

如果我在firefox和chrome中测试你的演示，两者的高度是相同的。我想你的浏览器有一个不同的缩放级别。在两种浏览器中同时按ctrl键和0键，然后再次比较。

如果我在firefox和chrome中测试您的演示，则两者的高度相同。我想你的浏览器有一个不同的缩放级别。在两个浏览器中同时按ctrl键和0键，然后再次比较。

顺便说一句，另一个答案已被接受。我为有同样问题的人发布我的答案，但这是问题的另一个原因

如果不是缩放问题，您可以使用reset.css

有了它，您的在所有浏览器（从左到右的chrome、firefox、opera和safari）中看起来都一样

顺便说一句，另一个答案已经被接受了。我为有同样问题的人发布我的答案，但这是问题的另一个原因

如果不是缩放问题，您可以使用reset.css

有了它，您的在所有浏览器（从左到右的chrome、firefox、opera和safari）中看起来都一样

---

你在使用吗？@matmuchrapna除了带有上述css的简单样式表外，什么都没有。@Ankit没有，根据你最近给出的答案，它也不起作用，你能给我看100%高度的屏幕截图吗。顺便问一下，还有离题，您正在使用“.container”选择器如果我在firefox和chrome中测试您的演示，则两者的高度相同。我想你的浏览器有一个不同的缩放级别。在两个浏览器中同时按ctrl键和0键，然后再次比较。你在使用吗？@matmuchrapna除了带有上述css的简单样式表外，什么都没有。@Ankit否，根据你最近给出的回答，它也不起作用，你能给我看100%高度的屏幕截图吗。顺便问一下，还有离题，您正在使用“.container”选择器如果我在firefox和chrome中测试您的演示，则两者的高度相同。我想你的浏览器有一个不同的缩放级别。在两个浏览器中同时按ctrl键和0键，然后再次比较。我刚刚也测试了这一点，并同意这个答案，Firefox似乎放大了1个格！我刚刚也测试了这个，并同意这个答案，看来Firefox放大了1个等级！

    .container {
            width: 500px;
            max-height: 730px;
            margin: 10px;
            border: 1px solid #fff;
            background-color: #ffffff;
            box-shadow: 0px 2px 7px #292929;
            -moz-box-shadow: 0px 2px 7px #292929;
            -webkit-box-shadow: 0px 2px 7px #292929;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }
   .mainbody,.header,.footer {
            padding: 5px;
        }
        .mainbody {
            margin-top: 0;
            min-height: 150px;
            max-height: 615px;
            overflow: auto;
        }
   .header {
            height: 40px;
            border-bottom: 1px solid #EEE;
            background-color: #ffffff;
            height: 40px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
    .footer {
            height: 40px;
            background-color: whiteSmoke;
            border-top: 1px solid #DDD;
            -webkit-border-bottom-left-radius: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -moz-border-radius-bottomleft: 5px;
            -moz-border-radius-bottomright: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

<div class="container">
<div class="header">Header</div>
<div class="mainbody">
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
</div>
<div class="footer">Footer</div>