當縮小頁面時，我無法將頁腳固定在屏幕的底部

我試圖在頁面底部保留頁腳div時，內容比視圖端口更短，但它也必須保持在當內容比視口高時，在頁面內容（而不是視口）上的底部。當縮小頁面時，我無法將頁腳固定在屏幕的底部

到目前爲止，它在放大時仍保留在內容的底部，但是當縮小時我無法將其保持在底部。有樣本的位置：絕對;我已經看到，但它使得頁腳留在視圖的底部，而不是放大時的內容。

我必須爲學校單位做這件事，有沒有辦法做到這一點？

現在我有頁腳位置作爲相對，雖然我想不會做任何事情，但堅持它接近最後的div，是嗎？但我似乎找到了我需要做的事情。

這是網站： http://www.foodforthought.webatu.com/Index.html當你放大，你會看到頁腳不留在底部。

這裏是我的CSS：

* { padding: 0; margin: 0; font-family: verdana; } 

html { 
    height: 100%; 
} 


body { 
font-size: 13px; 
color: #000; 
background-color: white; 
background-position: center; 
background-repeat: repeat-y; 
background-image: url('../images/background.jpg'); 

} 

/* Main div container */ 
#wrapper { 
margin: 0 auto; 
width: 960px; 
height: auto; 
} 

/* Header div */ 
#wrapper #header { 
    height: 200px; 
    background-color: green; 

} 

/* Special event section */ 
#header p { 
position:relative ; 
left: 30px; 
top: -100px; 
width: 300px; 
z-index: 1; 
color: white; 
border-style: dashed; 
padding: 5px; 
border-width: 1px; 
} 

/* Horizontal list div */ 
#wrapper #navigation { 
    height: 25px; 
background-color: white; 
display: block; 

} 

/* Horizontal list */ 
#navigation ul { 
padding-top: 5px; 
list-style-type: none; 
text-align: center; 
width: 960px 

} 

/* Horizontal list items */ 
#navigation li { 
display: inline-block; 
text-transform: uppercase; 
vertical-align: middle; 
} 

/* Horizontal list link */ 
#navigation a { 
height: 25px; 
width: auto; 
display: block; 
line-height: 15px; 
text-align: center; 
vertical-align: middle; 
text-decoration: none; 
color: black; 
padding-left: 8px; 
padding-right: 8px; 
} 

/* Horizontal list hover attribute */ 
#navigation a:hover { 
color: Darkgrey; 
} 


/* Content div */ 
#wrapper #content { 
display: inline-block; 
height: auto; 
width: 950px; 
background-color: white; 
padding-left: 10px; 
padding-right: 0px; 
} 

/* Content headings */ 
#content h2 { 
text-transform: capitalize; 
padding: 10px; 
} 

/* Content image(global) */ 
#content img { 
padding: 2px; 
border-width: 1px; 
margin: 10px; 
margin-left: 20px; 
Margin-right: 15px; 
} 

/* Content bullet list */ 
#content ul { 
padding: 15px; 
font-size: small; 
margin-left: 10px; 
} 

/* Content paragraph text */ 
#content p { 
padding-left: 10px; 
font-size: small; 
} 

/* Content image */ 
#content #img1 { 
float: left; 
border-style: dashed; 
} 

/* Content image */ 
#content #img2 { 
float: right; 
border-style: solid; 
border-width: 1px; 
border-color: #BDA27E; 
} 

/* Content image */ 
#content #img3 { 
float:left; 
border-style:double; 
margin-top: 20px; 
margin-left: 8px; 
border-width: 5px; 
border-color: #996633; 
} 

/* Side menu div*/ 
#wrapper #content #menu { 
float: right; 
padding: 0px; 
margin: px; 
width: 220px; 
height: 1118px; 
} 

/* Side menu*/ 
#menu ul { 
list-style-type: none; 
float: right; 
text-align: right; 
width: 170px 
} 

#menu li { 
background-image: url('../images/pg_menu_bg.png'); 
} 


/* Side menu link */ 
#menu a { 
height: 30px; 
display: block; 
vertical-align: middle; 
text-decoration: none; 
color: black; 
font-size: small; 
padding-top: 8px; 
margin-left: 10px; 
margin-right: 0px; 
} 

/* Side menu hover attribute */ 
#menu a:hover { 
color: darkgrey; 
} 

/* Footer div */ 
#wrapper #footer { 
height: 40px; 
background-color: #82AAF1; 
width: 960px; 
margin: 0px, auto; 
position: relative; 
bottom: 0; 

} 

/* Foot note */ 
#footer p { 
text-align: center; 
color: #6A1B1B; 
padding-top: 15px; 
font-size: 10px; 
} 

.padext { 
padding-top:2px 
}

對不起，我還是一個初學者。

謝謝你的時間。

來源

2014-09-13 user3796133

如果HTML是這樣的：

<body> 
<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

應用以下CSS。

#wrapper { 
min-height:100%; 
position:relative; 
} 


#content { 
padding:10px; 
padding-bottom:80px; /* Height of the footer element */ 
}

的#content的padding-bottom設定爲頁腳的高度。

#footer { 
width:100%; 
height:80px; 
position:absolute; 
bottom:0; 
left:0; 
}

我建議您參考以下鏈接：How To Keep Your Footer At The Bottom Of The Page With CSS

來源

2014-09-13 05:32:48 Varun

那驚人的工作。非常感謝你！ – user3796133 2014-09-13 06:29:58

當縮小頁面時，我無法將頁腳固定在屏幕的底部

回答

相關問題