높이 콘텐츠, 브라우저의 나머지 부분을 확장하는 꼬리말을 설정하십시오

그래서 첫 번째 생각은 "끈적 풋터"라는 것을 알고 있지만 실제로 그렇지는 않습니다. 변수 인 바닥 글의 높이입니다.높이 콘텐츠, 브라우저의 나머지 부분을 확장하는 꼬리말을 설정하십시오

메인 콘텐츠의 상단부터 200px 여백이있는 페이지가 있습니다 ... 콘텐츠가 끝난 후 브라우저 높이의 나머지 부분까지 아래쪽으로 확장해야합니다. repeat-x

2011-10-13 dcolumbus

페이지 내용은 일반적으로 얼마나 큽니까? 사용자가 페이지를 스크롤 할 수 있습니까? –

트릭이 하나 있습니다. 평소와 같이 머리글, 내용 및 바닥 글을 만듭니다. 바닥 글의 높이를 100 %로 설정하고 position:fixed 속성을 지정하고 이에 상단, 하단 등의 속성을 지정하지 않았는지 확인하십시오. 바닥 글이 "흐름에서 벗어나지 만 자연스럽지 않은 곳에 두십시오 (추악한 스크롤 막대는 제거됩니다).

이 작업은 example demo here에서 볼 수 있습니다.

출처

2011-10-13 21:41:47

알다시피, 내가 봤던 유일한 CSS 속성은 위치 정보입니다. 고마워, 조셉! – dcolumbus

@dcolumbus 환영합니다. :) 실제로 익숙해지면 정말 유용합니다. 다행히 도울 수있어. –

많은 콘텐츠가있는 페이지에서는 작동하지 않습니다. 꼬리말은 망각으로 밀려납니다. 대부분의 사람들은 두 경우 모두에서 작동하는 솔루션이 필요하다고 생각합니다. –

body의 하단 바닥 글은 background-image일까요?

그런 다음 주 콘텐츠를 원하는 배경으로 설정하면 페이지의 나머지 부분까지 바닥 글이 표시됩니다.

출처

2011-10-13 21:25:26 element119

바닥 글 이미지에 그라데이션이 있습니다. 페이지가 올바르게 표시 될 때마다 픽셀을 완벽하게 만들어야합니다. 너 알았어. – dcolumbus

http://jsfiddle.net/JFtwD/25/ 다음은 어떻게 할 수 있습니까? 최상의 솔루션인지는 모르겠지만 해결책입니다.

출처

2011-10-13 21:40:30 BjarkeCK

바닥 글에 최소 높이를 두는 것이 좋습니다. 다음과 같이하십시오 : http://jsfiddle.net/JFtwD/28/ – BjarkeCK

높이 콘텐츠, 브라우저의 나머지 부분을 확장하는 꼬리말을 설정하십시오

답변

관련 문제