瀏覽器高度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在底部創建額外的空間

回答

相關問題