Question

嘿伙计们，我希望我的页脚黑线始终保持在底部，无论显示器大小如何。我正在使用基于网格的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

请帮助，我确实在这里找到了一些信息但是当我把它搞砸了它没有帮助。非常感谢。

Answer 1

也许你可以试试bottom:0;？它对我有用。

Answer 2

您的.footer

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

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

页脚始终位于底部网格上

2 个答案: