끈적 끈적한 CSS 바닥 글이 깨졌습니다.

Question

위의 div가 내용량이 적을지라도 내 바닥 글은 페이지 하단에 머물도록 설계되었습니다. 최근까지 일 해왔고, 어떻게 든 부러 뜨린 것 같습니다. 좀 봐 주시겠습니까?

미리 감사드립니다.

CSS :

body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    font: 100% Helvetica, sans-serif, Arial, sans-serif; 
    color: #000; 
    background-color: #FFF; 
    background-image: url(images/BGmain.png); 
    background-repeat: repeat-x; 
} 
/*---------- 
Div styles 
----------*/ 
#container { 
    min-height: 100%; 
    position: relative; 
} 
.header { 
    padding: 0 0 230px 0; 
    text-align: center; 
    background-image: url(images/BGlogo_55top.png); 
    background-repeat: no-repeat; 
    background-position: top; 
} 
.column1 { 
    padding-bottom: 50px; 
    width: 960px; 
    margin: 0 auto; 
    position: relative; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50px;   
    text-align: center; 
} 
/*---------- 
Other 
----------*/ 
.plainimg { 
    border-style: none 
} 
/*---------- 
Text styles 
----------*/ 
p { 
    font-size: 80%; 
    color: #333; 
    line-height: 150%; 
    text-align: left; 
    padding: 1px 15px 1px 15px; 
} 
h1 { 
    font-size: 100%; 
    color: #000; 
    padding: 0; 
} 
h2 { 
    font-size: 100%; 
    font-weight: 500; 
    color: #000; 
    padding: 0; 
    text-align: center; 
} 
/*---------- 
Links 
----------*/ 
a.navlink:link, a.navlink:visited { 
    text-decoration: none; 
    display: inline-block; 
    color: #F1F1F1; 
    width: 120px; 
    text-align: center; 
    padding: 0 0 3px 0; 
    font-size: 80%; 
} 
a.navlink:hover, a.navlink:active { 
    text-decoration: none; 
    display: inline-block; 
    color: #FFF; 
    background-color: #000; 
    width: 120px; 
    text-align: centre; 
    padding: 0 0 3px 0; 
    font-size: 80%; 
} 
a:link, a:visited { 
    text-decoration: none; 
    color: #AEAEAE; 
} 
a:hover, a:active { 
    text-decoration: underline; 
    color: #999 
} 

사업부의 배열은 다음과 같다 :

<div id=container> 
<div class=header></div> 
<div class=column1></div> 
<div class=footer></div> 
</div> 

Answer 1

Jason McCreary가 말한 것처럼 html CSS에 높이를 추가해야합니다.

사용 : 페이지에

html 
{ 
    height:  100%; 
    margin:  0; 
    padding: 0; 
} 

이 어떤 이유에 대한 외부의 스크롤 막대를 트리거합니다.

UPDATE :이
스크롤 바는 .footer h6의 오버 플로우에 의해 트리거 될 것으로 보인다.
추가 : bottom: 2.5ex; 및 line-height: 1;에서 footer 스타일로 삭제됩니다.

그러나 더 좋은 방법은 입니다. a CSS reset입니다. 어떤 리셋

은 최소한 추가

.footer h6 { 
    margin: 0; 
    padding: 0; 
} 

합니다.

A CSS reset 또한 플랫폼 간 플랫폼을 가로막는 브라우저 간 변형을 최소화합니다. 여기

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

수정입니다 :

Answer 2

이 한 번보세요 : http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page가 나는 일반적으로이 과거에 나를 위해 깨진있다

콘텐츠의 일부인 범인 - 패딩, 유효하지 않은 마크 업 등. 귀하의 페이지에 대한 링크를 게시하면보다 구체적인 답변을 찾을 수 있습니다.

Answer 3

는 여기에 귀하의 문제

#container { 
min-height:100%; 
} 

좋은 물건 :

http://www.w3schools.com/Css/pr_class_position.asp

Answer 4

를 해결. 쉬운 솔루션 바닥 구역을 컨테이너 구역 외부에두기 만하면됩니다.

<div id=container> 
    <div class=header></div> 
    <div class=column1></div> 
</div> 
<div class=footer></div>