HTML頁腳貼在窗口底部
[英]HTML footer stick to the bottom of the window
問題描述
我正在編寫一個Web應用程序，並試圖使頁腳停留在窗口底部。 當內容較大時，則將頁腳向下推的窗口。 無論如何，有沒有辦法讓它粘貼在窗口底部並允許內容滾動？
HTML是...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.page {
width: 100%;
min-height: 100%;
}
.push {
padding-bottom: 4em;
overflow: auto;
}
#footer {
position: relative;
margin-top: -4em;
height: 4em;
clear: both;
background-color: red;
}
</style>
</head>
<body>
<div class="page">
<div id="content">
<p>content goes here</p>
</div>
<div class="push"></div>
</div>
<div id="footer">
<p>This is the footer block.</p>
</div>
</body>
2 個解決方案
解決方案1
1 2011-08-27 11:03:46
嘗試這個：
body {
height: 100%;
margin-bottom: 4em;
}
#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
background-color: red;
}
解決方案2
0 2011-08-30 08:30:34
將所有內容放入包裝盒中，並使用以下命令：
html, body, form
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different)
}
#footer, .push
{
height: 60px; (This is jus the height of MY footer, change this to whatever size your footer is)
}
沒有內容時將頁腳放在底部窗口
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.