保证金去了哪里？

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. 高度为100％html元素并不意味着“不高于窗口”。如果您不想滚动页面，可以设置overflow：隐藏在html上。但是你不会看到页脚。

Answer 2

<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>
<div id="footerDiv">FooterPanel</div>

其中一个主要问题是你有一个没有开口的第二个结束div - 这可以通过IE在怪癖模式下运行，并且在使用浮动和清除CSS时也会引起其他问题。

   <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>

以上是应该修正的更正代码 - 至少是一个开始。

您是否希望构建流畅的高度和宽度布局？

此外，您需要在启动页脚之前清除浮动。

<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 style="clear:both;"></div>
<div id="footerDiv">FooterPanel</div>

有一个代码的工作样本维持你的保证金。