0
好的 - 我承認我是一個CSS Newb（請溫和一下），而不是HTML大師的那麼多 - 我的業務邏輯比前端更好。也就是說，我正在爲我的丈夫開發一個網站（我們無法承擔外部的工作）。我正試圖在可能具有可變長度的頁面上實現粘性頁腳。問題是，自從我在頁面左側實現菜單後，頁腳跳到頁面的頂部。我不知道爲什麼，也不知道爲什麼。頁面內容從數據庫中提取。基本的HTML佈局是用HTML編寫的，其詳細信息（標籤條，菜單，內容）通過php寫出數據庫。基本的HTML結構是這樣的：CSS/HTML5 - 粘滯頁腳無法正常工作
<body>
<div id='content-container'>
<div id='wrapper'>...</div>
<div id='body-wrapper'>
<div id='floater-wrapper'>
<div id='floating-menu-1'>
</div>
<div id='floating-menu-2'>
</div>
<div>
<div id='content'>
</div>
</div>
<div id='foot-wrapper'>
<div id='foot-content'>
</div>
</div>
</body>
的CSS如下（注：我已盡力，我在這裏和在網上發現了粘頁腳解決方案的所有變化。）任何建議表示讚賞。
<style>
/*START NAV*/
ul, ul li, li{list-style: none;}
#navigation-wrapper{
background-image: url(images/line.png);
background-repeat: no-repeat;
background-position: right bottom;
height: 100px;
width: 1000px;
margin: 27px 0 0;
}
#logo{
display: block;
float: left;
height: 150px;
width: 200px;
display: block;
text-indent: -999993px;
background-image: url(images/wgclogo2_small.png);
background-repeat: no-repeat;
background-position: center center;
}
#logo a {
margin: 10px 0 0;
display:block;
height:100%;
width:100%;
}
#navigation{
display: block;
float: right;
margin: 10px 0 0 0;
}
#navigation ul {
color: #323131;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: right;
}
#navigation li {
display:inline;
padding: 0 0 0 15px;
font-weight: 600;
}
#navigation a {
color: #323131;
text-decoration: none;
font-size:13px;
}
#navigation a:hover{
color: #78756f;
border-bottom: 5px solid #323131;
border-top: 5px solid #323131;
padding-top: 12px;
padding-bottom: 10px;
}
div#nav{
width: 577px;
height: 44px;
}
div#nav ul {
width: 100%;
height: 100%;
overflow: hidden;
}
div#nav ul li {
float: right;
}
div#nav ul li a {
text-indent: 100px;
overflow: hidden;
display: block;
height: 44px;
}
/*Start First item in Nav 42+0=42 */
div#nav ul li.about a {width: 42px}
div#nav ul li.about a:hover, div#nav ul li.about a.current { }
/*End First item in Nav*/
/*Start Next item in Nav 58+42=100 */
div#nav ul li.food a {width: 58px}
div#nav ul li.food a:hover, div#nav ul li.food a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav 54+100=154 */
div#nav ul li.special a {width: 54px}
div#nav ul li.special a:hover, div#nav ul li.special a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav 42+154=196 */
div#nav ul li.service a {width: 42px}
div#nav ul li.service a:hover, div#nav ul li.service a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.cost a {width: 52px}
div#nav ul li.cost a:hover, div#nav ul li.cost a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.contact a {width: 57px}
div#nav ul li.contact a:hover, div#nav ul li.contact a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.customers a {width: 50px}
div#nav ul li.customers a:hover, div#nav ul li.customers a.current { }
/*End Next item in Nav*/
/*END NAV*/
/*START CONTENT & HEADERS*/
html, body{
height: 100%;
background-image: url(images/bkg.png);
}
#content-container{
min-height: 100%;
position:relative;
vertical-align: top;
}
#body-wrapper{
/* overflow: auto; */
min-height: 100%;
padding-bottom: 40px;
display: inline-block;
position:absolute;
vertical-align: top;
}
#content{
display:inline-block;
position: absolute;
width:800px;
margin-left: 200px;
}
h1 {
text-align: left;
text-decoration: none;
color: #003366;
font: normal normal 30px Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
h2 {
text-align: left;
text-decoration: none;
color: #993300;
font: 24px Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
h3 {
text-align: left;
font: 16px Georgia, "Times New Roman", Times, serif;
color: #666666;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
p.alert{
text-align: left;
font-weight: bold;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #ff5600;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
#content ul, ol {
border-left: 3px solid #dfedcb;
margin-left: 5px;
margin-bottom: 20px;
padding-left: 15px;
color: #323131;
font: 16px Georgia, "Times New Roman", Times, serif;
}
/* START Floating Menu Styles */
#floater-container{
display: inline-block;
position:absolute;
left: 0px;
vertical-align: top;
text-align: start;
}
div.floating-menu {
position:static;
background:rgba(0.25,0.25,0.25,0.25);
border:1px solid #299366;
width:185px;
z-index:300;
}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
/*END Floaters */
/*END CONTENT & HEADERS*/
/*START LOGIN*/
#login-wrapper{ vertical-align: middle; border-style: solid; border-width: thin; height: 125px; width: 500px; margin: 27px 0 0;}
#facebook{text-align: center; vertical-align: middle; background-image: url(images/login_border.png); background-position: right center; background-repeat: no-repeat; display:inline-block ; float: left; width: 200px; height: 125px; margin: 0 0 0 0;}
#local_login{vertical-align: middle; display: inline-block; float: right; width: 300px; height: 125px; margin: 0 0 0 0;}
/*END LOGIN*/
/* START TABSTRIP STYLES */
.tabStrip ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.tabStrip li {
margin: 0 2px 0 0;
list-style-type: none;
float: right;
}
.tabLink {
display: inherit;
text-decoration: none;
padding: 5px;
background: #e8e8e8;
border: #dadada solid;
border-width: 1px 1px 0 1px;
color: #8a8a8a;
}
.tabLinkActive {
display: inherit;
text-decoration: none;
padding: 5px;
background: #e0e0e0;
border: #c0c0c0 solid;
border-width: 1px 1px 0 1px;
color: #0066ff;
}
.tabContent {
display: none;
}
.tabContentActive {
display: inherit;
clear: both;
background: #f0f0f0;
border: 1px #dedede solid;
padding: 10px;
/* height:inherit; */
width:97.5%;
}
/*END TABSTRIPS */
</style>
你的標記甚至沒有爲我工作？ –
我得到一個空白頁 –
我沒有發佈任何內容只是div結構。 –