![](/img/trans.png)
[英]How to avoid the sticky header and footer overlapping with the content in HTML and CSS?
[英]How to create an HTML CSS Page with Header, Footer and Content
頁面有3個部分。
標題,在設計時具有未知內容,因為它在運行時填充了文本。 必須顯示所有文本,沒有滾動條。(我認為height: 100%
這樣做)
內容,內容應填充頁眉底部下方的頁面到頁腳頂部。 如果內容中有更多文本可以顯示,則滾動條應該可用。
頁腳。 頁腳應高25 25px
並始終位於視口的底部。
該窗口是一個彈出窗口,它應該永遠不會有窗口滾動條,它可以調整大小但沒有滾動條。 內容滾動條應該是唯一可用的滾動條。
調整窗口大小時,內容區域應調整大小,但頁腳保持不變,即固定在底部。
寬度都是100%
標題:不指定高度。 Div會根據內容的高度自動調整大小
內容:指定margin-bottom:25px以避免頁腳重疊
頁腳:位置:固定; 高度:25像素
您將不得不研究模擬位置的方法:修復IE <7。例如,參見
如果你想要頁腳底部的頁腳,這可能是一個痛苦的屁股。 我發現這樣做的唯一方法是讓它跨瀏覽器工作是通過使用一個可怕的表格布局 - 在我的頭被咬掉之前,表格布局是不受歡迎的 - 大時間。
標題和內容的定位很容易...但據我所知,到目前為止,我還沒有找到2種方法將頁腳定位在窗口的底部(而不是底部)對於短文檔可能是窗口的一半的文檔),1使用Javascript引用Window.Height而另一個使用表(不贊成,但這樣做的簡單方法)。
到目前為止,我還沒有看到在所有瀏覽器中可靠地執行此操作的CSS。 我很想看到一個這樣做的CSS ......
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.