html - margin 哪里去了？

Question

我有以下 html/css 代码:http://jsfiddle.net/J3YZ8/4/

HTML:

<div id="headerDiv">HeaderPanel</div>

<div id="bodyDiv">
    <div id="loginContainer">LoginPanel</div>
    <div id="contentContainer">Content</div>
    <div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>

CSS:

* {
    padding: 0px;
    margin: 0px;
}

html {
    height: 100%;
}

body {
    direction: rtl;
    height: 100%;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 75%;
}

#headerDiv {
    height: 20%;
    margin-bottom: 1%;
}

#footerDiv {
    height: 10%;
    margin-top: 1%;
}

#headerDiv,
#footerDiv {
    clear: both;
    background-color: #FF5500;
}

#bodyDiv {
    height: 68%;
    margin: 0% 2%;
}

#loginContainer {
    background: green;
    margin-bottom: 1%;
}

#menuContainer {
    background: blue;
    margin-top: 1%;
}

#loginContainer,
#menuContainer {
    display: inline-block;
    width: 29%;
    margin-left: 1%;
    height: 49%;
}

#contentContainer {
    width: 69%;
    height: 100%;
    background: yellow;
    float: left;
    margin-right: 1%;
}

如果您在浏览器上使用此代码(没有 jsfiddle)，您将看到蓝色 div (menuContainer) 和页脚之间没有边距。在 jsfiddle 中，边距不等于黄色 div (contentContainer) 和页脚之间的边距，尽管它应该相同。我该如何解决？

更多详情:
这是来自 jsfiddle 结果的图像:

这是来自全屏结果的图像:

有人知道怎么解决吗？

Answer 1

1. 我确实看到蓝色面板下方有空白。
2. html 元素 100% 的高度并不意味着“不高于窗口”。如果您不想滚动页面，您可以在 html 上设置 overflow:hidden。但是你将看不到页脚。