0

I am having a simple div with header,content and footer.Now my issue is that there is a gap at the bottom of my div.And if I resize browser window some more extra white-space is adding at the bottom of my div.

The entire leftContainer should be of browser height.

For example I need something like this(actually this is done n flash I want it to be done in HTML)

This is how it looks now:

enter image description here

Here is my 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>

I don't want the footer to be seperate it should be within its parent div(leftContainer)

DEMO

4

6 回答 6

1

您是否尝试过添加

position: relative;

到您的 .leftContainer 和

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

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

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

于 2012-05-11T07:05:37.190 回答
0

看看这个演示它工作正常

于 2012-05-11T07:35:54.630 回答
0

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

于 2012-05-11T07:07:16.023 回答
0

您是否尝试过添加

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

到您的 .leftContainer 和

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

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

于 2012-05-11T07:11:20.720 回答
0

您必须以百分比形式提及每个 div 的宽度。左容器总高度为 100%，然后以适当的百分比确定三个 div 的高度（如页眉 10%、正文 85% 和页脚 5%）。不建议以像素为单位提及高度或宽度。

用于firebug轻松调试 HTML 和 CSS。

于 2012-05-11T07:16:21.697 回答
0

像这样使用min-height:100%

可能对你有用吗

于 2012-05-11T08:11:36.900 回答