바닥 글에 항상 머무는 바닥 글

-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

바닥 글에 항상 머무는 바닥 글

답변

관련 문제