CSS - 바닥 글의 스타일을 지정하는 방법

에는 바닥 글의 스타일을 지정하는 방법이 있으므로 브라우저의 높이보다 많은 콘텐츠가 있으면 페이지의 맨 아래에 숨겨져 있지만 (있는 경우) 브라우저의 하단 가장자리에 붙어있는 콘텐츠가 충분하지 않습니까?CSS - 바닥 글의 스타일을 지정하는 방법

출처

2013-10-04 Pavel

페이지 맨 아래에 'min-height'를 넣으면됩니다. 바닥 글 뒤에 아무 것도 없으면 페이지의 나머지 부분을 차지합니다. –

이것을 읽으십시오 : http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page 다음 jquery 경유지를보십시오 – Sualkcin

하나의 해결책은 바닥 글의 알려진 높이를 필요로한다.

바이올린은 :

A lot of content

A little content

는 HTML입니다 :

<main> 
    hello 
</main> 
<footer> 
    i am the footer 
</footer>

그리고 여기에 CSS의 :

html, body { 
    height: 100%; 
} 
main { 
    min-height: 100%; 
    margin-bottom: -100px; 
    background: #ddd; 
} 
main:after { 
    content: ""; 
    display: block; 
    height: 100px; 
} 
footer { 
    height: 100px; 
    background: #eee; 
}

트릭은 min-height이 100 %가되도록 문서의 주요 부분을 설정하는 것입니다. 이 요소에는 페이지의 다른 요소가 모두 포함되어야합니다. 필자의 예에서는 main 요소를 사용했다.

다음으로이 요소에 바닥 글의 높이와 동일한 음수 여백을 지정하십시오. 이렇게하면 아래쪽에 바닥 글을위한 공간을 남겨두기에 충분합니다.

퍼즐의 마지막 부분은 after 요소입니다. 이는 음수 여백의 공간을 채우는 데 필요합니다. 그렇지 않으면 main의 내용이 바닥 글에 오버플로됩니다.

출처

2013-10-04 23:27:59 jmeas

이것은 작동하지 않습니다 http://jsfiddle.net/9hVyy/. ... 내용이 바닥 글에 들어가기 시작합니다. 많은
을 입력하고 "end"를 입력하면이 "end"가 바닥 글입니다. – Pavel

예. [http://jsfiddle.net/9hVyy/1/](http://jsfiddle.net/9hVyy/1/)를 확인하십시오. – jmeas

이 글은 읽기만하면됩니다. 내가 사용하는
Show footer if at bottom of page or page is short else hide

또는이
http://css-tricks.com/snippets/css/fixed-footer/

출처

2013-10-04 23:27:52 ummahusla

CSS - 바닥 글의 스타일을 지정하는 방법

답변

관련 문제