2010-07-21 24 views
3

這裏: http://www.wontletthisbeatme.com/information.aspCSS身高問題 - 集裝箱不會拉伸(無漂浮)在兩個鏈接,將顯示我的問題

在博客頁面上,你將看到的內容和容器的div伸展到儘管內容不需要太多空間,但很好。這將頁腳放在底部,看起來很好。但是,在第二個鏈接中,信息延伸到視點之外並且容器div和footer不調整以容納額外的內容。

這是一個我已經有一段時間了,但還沒有真正掌握這個概念的問題。我有身高:100%放置在我的html和body元素以及我的容器上,但仍然發現自己對CSS中的頁腳無效。我已經審查了網絡和之前發佈的許多鏈接,但正如我所說的,我無法理解這一點。任何幫助將不勝感激。

更新

我已經做了一些調整頁面。現在,我看到的最後一個問題是信息頁面,其中內容div中包含的信息實際上並未向下拉伸div。沒有浮動,也沒有理由可以看到這個div不應該隨其內容而延伸。有什麼建議?

回答

0

我的猜測從目前還不望源添加或移除額外的或丟失<div></div>標籤...

+0

通過http://validator.w3.org或其他驗證程序運行它們。 information.asp肯定有更多的錯誤。至少在結束標記的數量與開放標記的結束標記數量相同的情況下獲得結構是正確的,事情可能會變得更加清晰。 – 2010-07-21 14:20:22

+0

我更新了很多錯誤。在將其提供給我的合作伙伴然後將其轉換爲asp並填充內容之前,我驗證了我的html和css。他不太關心適當的驗證。 – Slevin 2010-07-21 14:37:18

1

是最可能是因爲footerContainer DIV位置設置爲絕對

3

我認爲這是因爲CSS爲footerContainer包含屬性「position:absolute;」。刪除它可以解決我的問題。

UPDATE:從它:容器(即contentContainer)如果刪除了屬性 「100%高度」 正確地延伸。但是,我再一次沒有分析整個佈局。

+0

刪除位置標籤會將頁腳放在內容下方,但不會拉伸容器,因此邊框也會延伸到頁腳的底部。此外,刪除該位置屬性會影響博客頁面或任何內容很少的頁面。 – Slevin 2010-07-21 14:25:45

+0

您的更新沒有改變我所知道的任何事情。我欣賞你的建議。 – Slevin 2010-07-21 16:13:36

+0

正如我寫的那樣,當我從contentContainer中移除高度時,它會伸展到底部,包裝一切。對你起作用嗎? – Diego 2010-07-21 16:41:12

0

用法如下;

.clear{clear:both; display:block; line-height:0%;} 

和使用作爲

<div class="clear"></div> 
+0

在內容和頁腳之間使用

Yoosuf 2010-07-21 14:19:35

1

您頁腳欄和導航欄上使用position:absolute的.clear。爲了解決這個問題,你需要停止在這兩個頁面上使用它,這樣導航欄可以將頁腳向下推到頁面上,而不是給它一個固定的位置。

+0

導航將需要是絕對的,並且不是「負責」推下頁腳。 contentContainer將擴展內容的高度,然後將頁腳放置在其下方。 – Slevin 2010-07-21 14:27:10

1

設置.footerContainer到的位置是:相對(或離開了位置屬性)

+0

使相對位置或移除該屬性將頁腳壓入內容下方,但不會拉伸頁面邊界,也不會將頁腳保留在內容很少的頁面底部。 – Slevin 2010-07-21 14:29:53

0

你描述你想要的聲音非常相似Making a footer not rise above the bottom of the screen without extraneous markup表示這個問題在我自己和原來的提問者,傑森克里斯塔提出了可行的解決方案。該鏈接具有不使用包含div的特殊要求,但我認爲它的概念應該在您的應用程序中證明有用。

+0

我已經回顧了這篇文章以及其中一個答案中提供的示例鏈接,並且沒有能夠得到這個真正適用於我的情況。 – Slevin 2010-07-21 14:58:57