2012-04-18 68 views
1

我有一個小型的網絡應用程序,我正在設計,而且我有一個真正奇怪的問題。內容將始終在頁面摺疊之下切出 - 您無法向下滾動以閱讀所有文本。我在Mobile Safari和Chrome/Firefox的桌面上嘗試過這種方式,但沒有成功。內容使用CSS3摺疊棄用

活網址爲http://byjakewithlove.com/code/mobile-webapp/

任何建議,我可以嘗試將有很大的幫助。我基本上與ID #內容 div,並擁有白色的BG和頁面文本。我有overflow: auto;應該在這個div內創建滾動條,甚至有height: 100%;。我對這個問題感到困惑 - 再次感謝您的幫助!

+0

好像所有的文本都是可讀的。請澄清是什麼問題。 – 2012-04-18 16:38:27

+0

@EliranMalka是的,我知道它看起來像這樣,但實際上並不全是可讀的。我在內容'div'的最底部添加了一個小圖片,以便您明白我的意思。刷新頁面並告訴我你是否可以看到圖形 - 如果沒有,則不是所有內容都正在顯示。另外使用'overflow:auto',你應該可以將它全部滾動,這也不起作用。 – Jake 2012-04-18 16:51:22

回答

1

你可以保持height: 100%內容元素,但使用絕對定位(不要忘了父母的位置設置爲relative,當然),將它貼到頂部,頭部元素的位置,同時設置padding值添加到與標題高度相關的內容元素。

+0

完美!現在開始工作,我原本應該注意到這一點。謝謝老兄欣賞它:) – Jake 2012-04-18 21:00:09

0

height: 100%被誤用 - 「100%」是指容器的高度,因此它是針對父級計算的,因此導致此行爲。

只需簡單地省略height: 100%聲明並設置固定的高度。

+0

但問題是,當我開始加載新頁面時,內容將不會具有相同的固定高度。我需要它是流動的,或者至少讓我在內容div中滾動。 – Jake 2012-04-18 16:56:24

+0

讓我補充一點,即使設置「height:10000px;」也沒有任何作用。您可以調整窗口大小並顯示更多內容,但不會出現滾動條。因此,不幸的是,使用固定的高度並不是一個解決方案。 – Jake 2012-04-18 16:58:01

+0

我已經使用開發人員工具將其更改爲所需結果,此外,您想通過設置「height:10000px」來實現什麼目標?使用小於視口的值對其進行測試,您會看到它的影響。 – 2012-04-18 17:00:29