頁腳始終保持在底部網格

-2

嘿傢伙我希望我的頁腳能夠始終保持在底部而不管顯示器的大小。我正在使用基於網格的css頁腳始終保持在底部網格

不確定問題是否在正文中？

/* GRID BASED ([{"media":"default","options": 
{"gutter":"0.25","columns":6,"width":"100%"}},{"media":"only screen and (min-width : 
641px)","options":{"gutter":"0.25","columns":10,"width":"90%"}},{"media":"only screen 
and (min-width : 1024px)","options": 
{"gutter":"0.25","columns":14,"width":"100%","maxWidth":"1232px"}}]) */ 

body { 
font-family: Arial, Helvetica, sans-serif; 
text-align: left; 
line-height:157%; 
color: #666666; 
font-size: 13px; 
letter-spacing:0px; 
} 

body img { 
max-width: 100%; 
height: auto; 
} 
body h1 { 
font-size: 30px; 
font-weight: bold; 
color: #333333; 
line-height: 120%; 
} 
body h2 { 
color: #333333; 
font-size: 24px; 
font-weight: bold; 
line-height: 120%; 
} 
body h3 { 
color: #5F5F5F; 
font-size: 20px; 
font-weight: normal; 
line-height: 120%; 
} 
body h4 { 
color: #5F5F5F; 
font-size: 14px; 
font-weight: bold; 
} 
body p { 
font-size:13px; 
color: #666666; 
line-height:157%; 
} 
body a { 
color: #0000FF; 
font-weight: normal; 
text-decoration: none; 
font-size: 13px; 
line-height:157%; 
} 
body a:active, body a:hover { 
color: #FF0000; 
} 
body a:visited { 
color: #7A1A8B; 
} 
.Header { 
clear: both; 
min-height: 25px; 
width: auto; 
background-color:#030303; 
} 
.main { 
clear: both; 
min-height: 300px; 
width: auto; 
} 
.footer { 
clear: both; 
min-height: 21px; 
width: auto; 
background-color:#030303; 
} 
.column_1 { 
min-height:25px; 
margin-left:auto; 
margin-right:auto; 
width:96.6666%; 
padding-left:1.6667%; 
padding-right:1.6667%; 
} 
.column_2 { 
min-height:300px; 
margin-left:auto; 
margin-right:auto; 
width:96.6666%; 
padding-left:1.6667%; 
padding-right:1.6667%; 
} 
.column_3 { 
min-height:21px; 
margin-left:auto; 
margin-right:auto; 
width:96.6666%; 
padding-left:1.6667%; 
padding-right:1.6667%; 
} 
.zeroMargin_mobile { 
margin-left: 0; 
} 
@media only screen and (min-width : 641px) { 
.column_1 { 
    width: 88.2000%; 
    padding-left:0.9000%; 
    padding-right:0.9000%; 
    min-height:25px; 
} 
.column_2 { 
    width: 88.2000%; 
    padding-left:0.9000%; 
    padding-right:0.9000%; 
} 
.column_3 { 
    width: 88.2000%; 
    padding-left:0.9000%; 
    padding-right:0.9000%; 
    min-height:25px; 
} 
.zeroMargin_tablet { 
    margin-left: 0; 
} 
.Header { 
    min-height: 25px; 
} 
.footer { 
    min-height: 25px; 
} 
} 
@media only screen and (min-width : 1024px) { 
.column_1 { 
    width: 98.5714%; 
    padding-left:0.7143%; 
    padding-right:0.7143%; 
    max-width:1232px; 
    min-height:25px; 
} 
.column_2 { 
    width: 98.5714%; 
    padding-left:0.7143%; 
    padding-right:0.7143%; 
    max-width:1232px; 
} 
.column_3 { 
    width: 98.5714%; 
    padding-left:0.7143%; 
    padding-right:0.7143%; 
    max-width:1232px; 
    min-height:25px; 
} 
.zeroMargin_desktop { 
    margin-left: 0; 
} 
.Header { 
    min-height: 25px; 
} 
.footer { 
    min-height: 25px; 
} 
}

HTML

<body> 
<div class="Header"> 
<div class="column_1 gridContainer"></div> 
</div> 
<div class="main"> 
<div class="column_2 gridContainer"></div> 
</div> 
<div class="footer"> 
<div class="column_3 gridContainer"></div> 
</div> 
</body>

CHECK IT OUT ON JSFIDDLE

請大家幫忙，我在這裏找到了一些信息，但是當我pluged它，它沒有幫助。非常感謝。

來源

2014-05-11 user3624859

你.footer

.footer { 
    clear:both; 
    min-height: 21px; 
    width: auto; 
    background-color:#030303; 

    position:fixed; 
    right:0px; 
    left:0px; 
    bottom:0px; 
}

來源

2014-05-11 06:17:03 nicael

是其作品兄弟。太感謝了 – user3624859

也許你可以試試bottom:0;？它爲我工作。

來源

2014-05-11 06:16:35 Taolin

頁腳始終保持在底部網格

回答

相關問題