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

我有一个简单的div与标题，内容和页脚。现在我的问题是，我的div底部有一个空白。如果我调整浏览器窗口的大小额外white-space正在我的div的bottom加入。浏览器高度DIV在底部创建额外的空间

整个leftContainer应该是browser height。

例如，我需要这样的东西this（实际上这样做是N快闪我希望它在HTML中进行）

这是现在的样子：

enter image description here

这里是我的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>

我不想页脚是独立的应该是它的父专区内（leftContainer）

DEMO

来源

2012-05-11 coder

你有没有关闭其类的div = leftcontainer – 2012-05-11 07:06:22

@ ANKIT，它在这里只是一个错字但它在演示中。 – coder

只有，你想leftcontainer有高度等于身体 – 2012-05-11 07:08:03

您是否尝试过加入

position: relative;

要你。 leftContainer和

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

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

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

来源

2012-05-11 07:05:37

@ Boris-感谢您的回复。我已经试过了，如果你最大化浏览器窗口，你可以看到底部仍然有一些空白。 – coder

@coder：你的意思是.footer下？它与身体有关吗？ –

绝对没有。这是我挣扎的原因，因为它的高度是100％，所以它延伸到浏览器的高度。 – coder

有一些问题与阴影，它们被添加到在某些浏览器长度，所以尽量只放边阴影和适用缘阴性。

来源

2012-05-11 07:07:16

@约翰尼 - 尽管我删除了阴影一样。 – coder

你有没有看到页脚的常见模式，它位于页面底部？采取[看]（http://www.cssstickyfooter.com/）。对我来说，它解决了所有问题。 –

你有没有尝试添加

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

要将.leftContainer和

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

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

来源

2012-05-11 07:11:20

这将适用于您 – 2012-05-11 07:13:06

你必须提到每个div的宽度，以百分比表示。左总容器高度为100％，然后用适当的百分比确定三个div的高度（例如标题10％，正文85％和页脚5％）。提及像素的高度或宽度并不容易理解。

使用firebug可轻松调试HTML和CSS。

来源

2012-05-11 07:16:21

@ Rp-百分比从不与此一起工作。 – coder

退房这个DEMO它工作正常

来源

2012-05-11 07:35:54 khurram

使用此类似min-height:100%

可能就会对你有用

来源

2012-05-11 08:11:36 Sam

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

回答

相关问题