浏览器高度DIV在底部创建一个额外的空间

Question

我有一个带标题，内容和页脚的简单div。现在我的问题是我的div底部有一个间隙。如果我调整浏览器窗口的大小，则会增加一些额外的white-space我的div bottom。

整个leftContainer应为browser height。

例如我需要像this这样的东西（实际上这是在flash中完成的，我希望它能用HTML完成）

现在的样子：

这是我的CSS：

html, body
{
     margin: 0; 
     border: 0 none; 
     padding: 0; 
          overflow: hidden;
}
html, body, #wrapper, #left, #right 
{
     height: 100%; 
     min-height: 400;
}
.leftContainer 
{
    width:308px;
    max-height: 100%;
    height:100%;
    border-style: solid;
    border-width: 2px 0px 0px 0px;
    background-color: #ffffff;
    box-shadow: 0px 0px 7px #292929;
    -moz-box-shadow: 0px 0px 7px #292929;
    -webkit-box-shadow: 0px 0px 7px #292929;
}
.mainbody
{
    padding-left: 5px;
    margin-top: 0;
    min-height: 150px;
    max-height:736px;
    height: 100%;
    background-color: #F9F9F9;
}
.header
{

    height: 40px;
    color: #000;
    border-bottom: 1px solid #EEE;
}

.footer 
{
    padding-left:20px;
    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;
}​

HTML：

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

我不希望页脚分离它应该在其父div（leftContainer）

内

DEMO

Answer 1

您是否尝试过添加

position: relative;

到你的.leftContainer和

position: absolute;
bottom: 0;
left: 0;
right: 0;

你的.footer？应该做你想要的。

看看：http://jsfiddle.net/UqJTX/7/embedded/result/

Answer 2

阴影存在一些问题，它们会在某些浏览器中添加到长度中，因此请尝试仅放置侧阴影并应用负边距。

Answer 3

您是否尝试过添加

position: absolute;
bottom: 0;
left: 0;
right: 0;
top:0;
overflow:auto;

到你的.leftContainer和

position: absolute;
bottom: 0;
left: 0;
right: 0;

你的.footer？应该做你想要的。

Answer 4

您必须以百分比形式提及每个div的宽度。左侧容器总高度为100％，然后以适当的百分比确定三个div的高度（如标题10％，正文85％和页脚5％）。提及像素的高度或宽度是不可取的。

使用firebug轻松调试HTML和CSS。

Answer 5

查看此DEMO它是否正常运行

Answer 6

像min-height:100%

一样使用它

可能对你有用