CSS의 바닥 글 문제 ... 도움이 필요합니다.

Question

AIM : 많은 요소를 기반으로 바닥 글을 배치하고 싶습니다. 여기에서 찾을 수 있습니다

1) 내 페이지에 내용이 없거나 (1 줄 또는 2 줄 일 수있는 경우) 화면 하단에 바닥 글을 배치하고 싶습니다. 스크롤 바를 사용하지 않고 볼 수있는 바닥 글

2) 내 페이지에 너무 많은 콘텐츠가있는 경우 내 꼬리말을 콘텐츠의 마지막 줄 아래에 상대적으로 배치해야합니다. 따라서 꼬리말은 내용에 따라 위치를 조정해야합니다.

참고 : 바닥 글은 화면 크기/해상도가 다른 시스템에서 일관되어야합니다 (노트북은 화면 크기가 노트북과 다릅니다).

기타 INFO ----> #footer가있는 #footer_outer가 있습니다.

#frame { 
    margin:0 auto; 
    width:962px; 
    margin-top:10px; 
    height:auto; 
} 

#content { 
    padding:5px 5px 5px 5px; 
    margin:0 auto; 
    width:890px; 
    height:auto; 
    min-height: 372px; /* i use this to have footer at the bottom of **my** screen when there is not much content. */ 
} 

#footer_outer{ 
    width:100%; 
    background:#444; 
    padding:10px 0 0 0; 
    height: 130px; 
    position:relative; /*to put footer_outer 50px below the content*/ 
    top: 50px; 
    bottom:0px; 
} 

#footer { 
    margin:0 auto; 
    width:834px; 
    height:auto; 
    overflow:hidden; 
} 

이 CSS를 변경하는 데 도움을주십시오. 고마워요!

Answer 1

<style> 
    #wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -100px; /* fix negative height */ 
    } 
    #footer, #push { 
    height: 100px; /* fix positive height */ 
    clear: both; 
    background:#000; 
    } 
</style> 

<div id="wrapper"> 
    <p>content here.</p> 
    <div id="push"></div> 
</div> 
<div id="footer"> 
    footer 
</div> 

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Answer 2

체크 아웃이 5 가지 솔루션과

1-4 최선의 선택이 때문에 또 다른 하나 here

Answer 3

here

을 찾을 수 있습니다 콘텐츠 길이가 가변적입니다. 다른 방법으로는 보지 못합니다. JavaScript를 노래하십시오. 특히 다른 화면 크기에 따라 다르기를 원하면 특히 그렇습니다. 먼저 뷰포트 높이와 #content의 높이를 확인하고 그 수를 기반으로 원하는 위치에서 바닥 글에 맞게 수학을 수행해야합니다.

Answer 4

다음과 같이 페이지 컨테이너를 정의하십시오. height : 100 % ; 위치 : 상대적;

그런 다음 컨테이너 내부에 바닥 글 div의 너비, 위치를 지정하십시오 : 절대; 하단 : 0 픽셀;