有人可以幫我把我的頁腳正確放在我的網頁上嗎?如何使用CSS正確定位頁腳?
我有以下佈局:
這是我多麼希望頁腳的行爲:
- 頁腳應該在網頁的底部放置當含量空。
- 當內容超出頁面高度時,頁腳應該被「推下」。
這裏是我的HTML:
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
/* This is outside of the container as I want the background
to stretch across the top of the webpage */
<div id="menu">
<div>
/* This contains an unordered list which is restyled as a series of links.
The reason it is contained in inside the menu div is because I want this
content to be centred. /*
</div>
</div>
<div id="page-container">
<div id="header">
<h1>Website title</h1>
</div>
/* This is floated to the left of the content area. */
<div id="content">
@RenderBody()
</div>
/* This is floated to the right of the content area. */
<div id="sidebar">
@RenderSection("sidebar", false)
</div>
</div>
<div id="footer">
My footer content goes here.
</div>
請注意以下事項:
- 內容和頭包含在一個 'DIV' 叫「頁面容器」。
- 內容由浮動在內容區域左側和右側的兩個Div組成。
- 該菜單位於頁面容器div之外。這是因爲我希望菜單背景,在頁面的頂部伸展(如#1菜單)
我知道有#2,許多類似的問題谷歌搜索會返回大量的結果。
我試圖調整我發現的樣本時注意到的事情是,它們通常依賴於與我的不匹配的非常特定的html結構(E.G.所有內容,但頁腳在容器中)。無論我嘗試什麼,我最終都會遇到一些不起作用的東西(例如,當內容爲空時,頁腳位於屏幕邊界下方,或者當內容超出頁面時,頁腳不會向下移動)。
更新
我可以讓我的頁腳粘到頁面的底部,但是當我的內容擴展它沒有被按下。我認爲這是因爲我的內容由兩個浮動元素組成。
大多數人似乎都指着我找到他們在Google上找到的教程(正如我已經說過的,我已經閱讀了大部分教程並已嘗試調整它們)。
我得出結論,我將不得不重構我的HTML以使其工作;我的問題的重點是我如何用HTML已經有的做到這一點?非常關注分離問題!
j08691的評論是我認爲你正在尋找的。您可以調整它以適合您的HTML。 – jmbertucci 2012-08-14 15:19:54
@ j08691the鏈接現在是垃圾郵件 – 2017-05-07 02:25:00