바닥 글이 다른 장치 높이에 제대로 표시되지 않습니다.

Question

내 바닥 글에 문제가 있습니다. 일부 콘텐츠가있는 페이지가 있고 일부 기기 (모바일보기 - 축소보기)에서 일부 기기에서는 내 페이지 콘텐츠가 상위 기기 높이를 채우지 않습니다. 바닥 글은 이러한 높이에 문제가 있습니다. 콘텐츠가 상위 장치 높이를 채우지 않으면 바닥 글이 페이지 아래쪽에 올바르게 표시되지만 콘텐츠가 상위 장치 높이를 채우고 오버플로되면 내용에 대해 바닥 글이 표시됩니다. 나는 영어로는 명확하지 않을 수도 있지만,이 스크린 스냅은 당신을 분명하게 할 것입니다. 콘텐츠 (정확하게 표시) 상위 높이 오버 플로워 콘텐츠

글을 작성하지와

가

글

화질이 분명하지 않다 (꼬리말 정확하게 도시되지 않음) 그러나 여전히 볼 수 있습니다.

이것은 CSS 코드입니다. 지금까지 사용해 왔습니다.

#footer{ 
    display:block; 
    margin-right:auto; 
    margin-left:auto; 
    position:absolute; 
    bottom:0; 
    height:100px; 
    width: 60%; 
    text-align:center; 
    color:green; 
    font-size:18px; 
    font-family:Times; 
} 

이 문제를 해결할 수 있습니까? 콘텐츠가 넘칠 때 페이지 끝 부분에 꼬리말을 표시하고 싶습니다. 도움이 될 것입니다. 당신 때마다에게 위치를

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="main"></div> 
    <div id="footer"></div> 
</div> 

#wrapper { 
    position: relative; 
    padding-bottom: 110px; 
} 

Answer 1

(당신이 녹색 테두리로 항목에 대한 id="main"를 사용하는 가정, 다음을 수행 무언가 절대적으로 당신은 DOM의 바깥 쪽을 가져 간다. 즉,이 경우에는 가장 가까운 위치에 CSS 0을 놓는다. 나는 꼬리말을 content 나 content block의 뒤에 넣고 말하기 만하면된다.

margin 0 auto; 

Answer 2

:

#main { 
    margin-bottom: 100px; 
} 

편집 :

바닥 글 바로 당신의 #main 요소에

Answer 3

바닥 글이 절대적으로 배치되어야하는 경우 항상 여백 - 바닥 또는 패딩 - 바닥을 본문 요소에 추가 할 수 있습니다. 그냥 절대적으로 배치 된 요소의 100px로 만들고 내용을 배치 된 요소 위에 올려야합니다.

또는 바닥 글을 정적으로 배치하도록 설정할 수도 있지만 내용이 너무 짧으면 바닥 글이 화면 하단에 표시되지 않습니다.