WordPress 페이지 하단에 바닥글을 첨부합니다. CSS를 사용하여 웹페이지 하단에 바닥글을 고정하는 방법은 무엇입니까? 스페이서를 삽입하고 Internet Explorer와 싸웁니다

실제 예제로 넘어 갑시다

어떤 것이 보이나요? 레이아웃 결함고정된 바닥글 효과를 구현하는 측면에서? 우리는 그것을 본다
1) 사이트의 바닥글은 높이 백분율이 없는 id=layout 블록 내부에 있습니다. 이론에 따르면 그와 부모, 그리고 block.content-left 콘텐츠는 높이를 100%로 설정해야 합니다. 후자에서는 문제가 발생합니다. 이에 적합하지 않습니다. 결과적으로 하나의 중간층 블록이 누락되었거나 바닥글이 올바른 수준에 있지 않습니다. 게다가,
2) 바닥글의 높이는 가변적입니다(목록의 요소 수와 글꼴 크기에 따라 HTML이 아닌 CSS에서 볼 수 있음). 그리고
3) ~ 위에 #공들여 나열한 것고정 높이 90px의 광고 블록이 있습니다.
4) 바닥글이나 (일반적으로 말하면) 블록에 정렬 ​​블록이 없습니다. #공들여 나열한 것(예, 하지만 블록 위에 .rotated_posts; 그러나 아마도 바닥글로 분류되어야 할 것입니다).

포인트 4 - 스크립트로 그려야 합니다.
#layout(margin-top:-90px;) 을 추가하면 세 번째 요점을 처리하는 것이 쉬워 보일 것입니다. 그러나 이 블록은 존재하지 않을 수도 있다는 점을 기억하십시오. 배너 절단으로 인해 표시되지 않거나 광고주가 갑자기 표시하지 않기로 결정합니다. 사이트에 그렇지 않은 페이지가 많이 있습니다. 그러므로 의존성은 여백 상단광고 블록에서 나오는 것은 나쁜 생각입니다. 안에 넣어두는게 훨씬 낫더라구요 #공들여 나열한 것-그러면 그는 아무것도 방해하지 않을 것입니다.

첫 번째 요점은 고정된 바닥글이 제대로 작동하려면 아래에 바닥글 블록을 배치해야 한다는 것입니다. #공들여 나열한 것. 그러나 자바스크립트의 도움으로 다른 고정된 바닥글 구성표를 구현할 수 있지만 어떤 경우에도 JS가 필요하거나 처음에는 JS 없이 올바른 레이아웃이 필요합니다.

우리는 콘텐츠 내부에 바닥글을 "때린" 최신 웹사이트 레이아웃 디자이너보다 더 강할 수 없기 때문에 미래의 웹사이트에 바닥글을 적절하게 배치한다는 아이디어는 제쳐두겠습니다. Habr보다!), 자바스크립트(userscript)를 사용하여 Habr을 올바른 하나의 조건으로 분석해 보겠습니다. (비난할 사람은 레이아웃 디자이너나 스위처가 아니라 물론 사이트 유형에 따라 프로젝트 관리의 전략적 결정이 결정된다고 바로 가정해 보겠습니다.) 이렇게 하면 우리는 이상을 달성하지 못할 것입니다. 로딩 과정 중 처음 1~2초 동안 페이지 레이아웃이 잘못됩니다. 하지만 우리에게 중요한 것은 IT 세계에서 가장 인기 있는 웹사이트를 품질 면에서 능가할 수 있는 컨셉과 기회입니다.

따라서 스크립트의 올바른 위치(초기, 페이지 로딩이 끝날 때)에 광고 및 바닥글의 DOM 블록 전송을 올바른 위치에 기록합니다. (사용자 스크립트로 인해 솔루션이 순수 솔루션보다 더 복잡해질 것이라는 점을 염두에 두자.)
var dQ = function(q)(return document.querySelector(q);) //단축용 var topL = dQ("#topline"),lay = dQ("#layout"), foot = dQ("#footer" ); if(topL &&lay) //배너 - 콘텐츠 블록 내부lay.insertBefore(topL,lay.firstChild); if(lay && foot &&lay.nextSibling) //바닥글 이동lay.parentNode.insertBefore(footer,lay.nextSibling);
블록을 해당 위치에 배치했습니다. 이제 남은 것은 필요한 속성을 요소에 할당하는 것뿐입니다. 바닥글 높이는 사용자 스크립트가 활성화될 때(페이지 로딩이 끝날 때) 이미 알고 있기 때문에 정확하게 설정해야 합니다. 위에서 언급한 것처럼 사용자 스크립트의 트리거 포인트로 인해 페이지 바닥글 표시의 점프가 불가피합니다. "좋은 얼굴"을 시도할 수 있지만 "나쁜 게임"을 사용한다고요? 무엇을 위해? 사이트의 "나쁜 게임"을 사용하면 추가 노력 없이도 컨셉을 만들 수 있습니다. 이는 품질을 평가하는 데 충분하며 프로젝트의 "올바른 게임"에는 필요하지 않습니다.
if(foot)( //블록 정렬기

바닥글에서 h.apnd_el((clss:"clear",appendTo: footer)); var footH = foot.offsetHeight; //...그리고 바닥글의 높이를 측정합니다. ) if(topL &&lay && footer &&lay.nextSibling)( //콘텐츠에서 필요한 높이의 블록 정렬 ("레이아웃") h.apnd_el((clss:" clear", css:( height: (footH ||0) +"px"),appendTo:lay));lay.style.minHeight="100%";h.addRules("#layout(margin-bottom:- "+ footH +"px !important)html, 본문(높이:100%)"); )
여기서는 자체 작성 함수를 사용하도록 허용했습니다. h.apnd_el, 이는 jQuery에서와 거의 동일한 작업을 수행합니다.
$("").css((높이: footH ||0)).appendTo($(footer))
그리고 - CSS 규칙을 구현하는 또 다른 일반적인 기능 - h.addRules. "를 사용하여 규칙을 선언해야 하기 때문에 여기서는 그것 없이는 할 수 없습니다. !중요한" - 정확하게는 사용자 스크립트의 스타일 우선순위 특성 때문입니다.

이러한 코드 조각을 사용하면 사용자 스크립트에서 고정된 바닥글을 볼 수 있고(아래로 점프한 후) 페이지 레이아웃을 작성하는 방법을 완전히 이해할 수 있습니다. 점핑 디자인을 매일 사용하는 것은 불편하므로 시연 및 테스트용으로만 사용하는 것이 좋습니다. HabrAjax 사용자 스크립트에서 유사한 스크립트를 설치하고 버전 0.883_2012-09-12부터 "underFooter" 설정으로 닫았습니다(설정 목록에서 "바닥글이 맨 아래에 고정됨" 앞의 상자 선택).

바닥글 고정이 ZenComment 스타일이 설치된 경우 업데이트 필요성에 영향을 미치나요? 네, 그렇습니다.사용자 스크립트에 의해 삽입된 스타일이 가장 낮은 우선순위를 갖는 복잡한 스타일 우선순위 체인으로 인해 우리는 사용자 스타일을 약간 조정해야 했습니다. 가능성고정된 바닥글로 작업 중입니다. 사용자 스타일을 2.66_2012-09-12 +로 업데이트하지 않으면 바닥글이 정확하게 작동하지 않습니다.

차단하다 회전_포스트 (과거 인기 게시물 3개) 바닥글이 더 논리적으로 보이기 때문에 실제 스크립트에서도 바닥글로 이동됩니다.

두 번째 요점(레이아웃 단점 목록 중)은 순전히 Habr에 대한 논의입니다(사용자 스크립트에는 적용되지 않으며 이전 항목을 부분적으로 반복합니다).

페이지에는 순수 CSS를 사용하여 고정된 바닥글(브라우저의 기본 글꼴 크기에 따라 정의되지 않은 바닥글 높이)을 만들지 못하는 문제가 있습니다. CSS를 이용하여 바닥글을 구현하려면 글꼴의 상대적인 높이를 선택해야 하는데, 사용자의 컴퓨터에 필요한 글꼴이 없으면 바닥글이 작동하지 않을 수 있습니다. 따라서 솔루션에는 전환을 사용하여 바닥글의 대략적인 위치를 정확한 위치로 조정할 수 있는 JavaScript가 포함되어야 합니다. 또는 다양한 플랫폼의 사용자 스크립트에서 작성된 솔루션의 수용 가능성을 살펴본 후 고정된 바닥글을 계산하여 설치합니다. 첫 번째 관찰에서는 솔루션이 실용적이라는 것을 보여줍니다.

결론: Habré에서 레이아웃을 완전히 디자인하는 것은 가능하지만 이를 위해서는 레이아웃의 동작을 명확하게 이해하고 블록을 올바른 순서로 배치하는 레이아웃 디자이너가 필요합니다. (현재 바닥글과 상단 배너는 "잘못된 위치에" 있으며 바닥글의 스타일을 바로 고정할 수 있는 방식은 아닙니다.) 바닥글의 높이를 상대 단위로 설정하면 JS 없이도 할 수 있습니다. 글꼴 불확실성의 여지가 있습니다.

구현

HabrAjax 0.883+를 활성화하면 "네일된 바닥글"이 작동하는 것을 볼 수 있습니다. 스크립트를 사용하여 높이를 조정합니다. 이를 통해 고정된 바닥글이 있는 페이지가 일반 페이지에 비해 얼마나 더 나은지 평가할 수 있습니다. ZenComment 사용자 스타일은 스크립트와 호환되지만 고정된 바닥글이 제대로 작동하려면 ZenComment 버전 2.66_2012-09-12 +를 설치해야 합니다.

구현 동작에 대한 사실

바닥글, 스타일 및 스크립트가 포함된 샤머니즘은 샤머니즘입니다(이론으로만 뒷받침됨). 동작은 브라우저마다 약간 다르지만 일부 위치에서는 예상치 못한 현상입니다. 사용자 스크립트와 블록 재배열이 없으면 결과가 달라집니다. 이것이 사용자 스크립트의 구현 실험에서 나온 결과입니다.

1) Firefox - 바닥글 점프가 예기치 않게 부족합니다. 바닥글이 바닥에 배치된 후에 렌더링이 발생합니다.

2) Chrome - "방황 스크롤링"으로 인해 놀랐습니다. 하단의 빈 공간이 1초에 한 번씩 페이지에 추가됩니다. 높이 계산에 문제가 발생했습니다. 해결책은 사용자 스타일로 html,body(height:100%) 을 작성하는 것이지만 항상 작동한다는 보장은 없습니다. 문서가 창 높이를 초과하지 않는지 확인하는 것이 더 안정적이며 그렇지 않은 경우 바닥글을 이동하고 그렇지 않으면 아무것도 이동하지 않습니다. 점프는 괜찮습니다. 존재합니다.

3) Opera - 페이지가 처음 로드될 때 점프가 없지만(v. 12.02) 급하게 다시 로드하면 바닥글 점프가 표시될 수 있습니다. 그렇지 않으면 Fx보다 정확하게 동작합니다.

글쎄, Chrome이 올바르게 작동하도록 특별히 가르치고(스크립트를 사용하여) 이 형식으로 버전을 출시하여 표시해야 합니다. 따라서 사용자 스크립트의 섹션은 기사에 제공된 섹션보다 조금 더 복잡합니다.

이는 완전한 구현이 아니라는 점을 기억해야 합니다. 예를 들어 사용자가 창 크기를 조정하는 경우는 고려하지 않습니다. 또한 이동 전후에 바닥글 높이를 변경하는 드문(실제로) 조합을 찾을 수도 있는데, 여기서 논리가 불편함 없이 실패하기 시작합니다. 개선의 복잡성과 솔루션의 일시적 성격 사이에 균형이 유지되었기 때문에 단점은 의도적으로 남겨두었습니다.

결과적으로 우리는 적어도 빠른 데스크톱 컴퓨터에서는 완전히 실행 가능한 운영 체제를 얻었습니다. 바닥글의 잘못된 동작이 감지되면 "underFooter" 설정을 비활성화해야 합니다.

어떤 페이지에 유용합니까?

사용자 스타일이 없는 표준 웹사이트에서는 짧은 질문 및 답변 페이지도 1500px보다 길어지며 대부분의 경우 가로 모니터에서는 눈에 띄지 않습니다. 그러나 일반 모니터에서도 높이가 약 1300픽셀인 개인 사용자 페이지를 자주 접하게 되는데, 여기에는 첨부되지 않은 바닥글이 그 모습 그대로 나타납니다. 사용자 설정의 페이지 수도 그리 길지 않습니다.

ZenComment 사용자 스타일을 사용하면 필요한 페이지 높이가 크게 줄어들고 HabrAjax 사용자 스크립트는 사이드바에 사이드 블록의 일부 또는 전부를 표시하지 않을 수 있습니다. 따라서 스크립트와 스타일을 사용하면 첨부되지 않은 바닥글의 효과가 눈에 띄게 더 자주 관찰됩니다. 따라서 바닥글 수정이 HabrAjax에 처음 등장한 것은 논리적입니다. 그러나 일반 웹사이트에도 고정된 바닥글이 유용할 수 있는 페이지가 많이 있습니다.

지원이 될까요?

지난 해 사이트의 행동을 보면 개발자(및 경영진)가 이전에는 사용자 스크립트와 사용자 스타일에만 존재했던 기능을 도입하기 시작했음을 알 수 있습니다. 예를 들어, 연초에 나는 작은 소원을 많이 모은 곳에 글을 썼습니다. 6개월 후, 나는 이 사이트를 다시 방문했고 희망사항으로 설명된 여러 기능이 이미 사이트에 구현되었다는 사실을 알게 되어 기뻤습니다(텍스트에서 바로, "UPD"와 날짜를 볼 수 있음).

다음으로 댓글 평가를 위해 사각형 대신 "화살표"를 살펴보겠습니다. 약 3년 전에 userils("Prettifier")에 등장했고 약 2년 전에 ZenComment에 채택되었습니다. 약 2~3개월 전에 사이트에 등장했습니다. ZenComment(숫자 왼쪽에 하나의 화살표, 오른쪽에 두 번째 화살표)에서 수행된 것처럼 시간이 지나면 화살표가 약간의 거리를 두고 떨어져 놓칠 것이라고 믿기 시작합니다.

사용자 스타일

HabrAjax

태그 추가

조만간 모든 레이아웃 디자이너는 웹 사이트의 바닥글을 페이지 하단까지 눌러야 하는 상황에 직면하게 됩니다. 이 문제를 해결하는 방법은 인터넷에 여러 가지가 있습니다. 제가 실제로 사용하는 것 중 일부를 보여 드리겠습니다.

가장 간단한 HTML 마크업:

방법 #1

바닥글은 절대적으로 위치를 지정하고 상위 블록(html, 본문 및 래퍼)의 높이를 100%로 늘려 맨 아래로 푸시됩니다. 이 경우 콘텐츠 블록은 바닥글 높이보다 크거나 같은 아래쪽 여백을 지정해야 합니다. 그렇지 않으면 후자가 콘텐츠의 일부를 덮게 됩니다.

* ( 여백: 0; 패딩: 0; ) html, 본문 ( 높이: 100%; ) .wrapper ( 위치: 상대; 최소 높이: 100%; ) .content ( 패딩 바닥: 90px; ) .footer ( 위치 : 절대; 왼쪽: 0; 아래쪽: 0; 너비: 100%; 높이: 80px; )

방법 #2

콘텐츠 블록과 해당 "상위 항목"을 브라우저 창의 전체 높이까지 당기고 음수 여백(여백 상단)을 통해 바닥글을 들어올려 나타나는 수직 스크롤을 제거하면 바닥글이 눌러집니다. 이 경우 지하실의 높이를 표시하여야 하며, 압입량과 동일하여야 한다. box-sizing: border-box 속성 덕분에 콘텐츠 클래스가 있는 상자의 높이가 100%를 초과하는 것을 방지합니다. 즉, 이 경우 min-height: 100% + padding-bottom: 90px는 브라우저 창 높이의 100%와 같습니다.

* ( 여백: 0; 패딩: 0; ) html, body, .wrapper ( 높이: 100%; ) .content ( 상자 크기: 테두리 상자; 최소 높이: 100%; 패딩 바닥: 90px; ) . 바닥글( 높이: 80px; 여백 상단: -80px; )

방법 #3

이 방법은 다른 방법(5번째 제외)과 달리 바닥글의 높이가 중요하지 않기 때문에 좋습니다. 여기서는 래퍼 블록을 테이블로, 콘텐츠 블록을 테이블 행(각각 디스플레이: 테이블 및 디스플레이: 테이블 행 속성)으로 전환하여 테이블의 동작을 에뮬레이트합니다. 덕분에 콘텐츠 블록과 모든 상위 컨테이너 높이가 100%로 설정되어 콘텐츠가 자동으로 결정되는 바닥글 높이를 뺀 전체 높이까지 늘어납니다. 테이블 에뮬레이션을 통해 바닥글이 그 이상으로 확장되는 것을 방지합니다. 브라우저 창의 높이.

*( 여백: 0; 패딩: 0; ) html, body ( 높이: 100%; ) .wrapper ( 디스플레이: 테이블; 높이: 100%; ) .content ( 디스플레이: 테이블 행; 높이: 100%; )

방법 #4

이 방법은 이전 방법과 다르며 그 특징은 최신 브라우저에서만 지원되는 CSS 함수 calc() 및 vh 측정 단위를 사용한다는 것입니다. 여기서 바닥글의 정확한 높이를 알아야 합니다. 100vh는 브라우저 창의 높이이고 80px은 바닥글의 높이입니다. 그리고 calc() 함수를 사용하여 첫 번째 값에서 두 번째 값을 빼서 바닥글을 맨 아래로 누릅니다.

* ( 여백: 0; 패딩: 0; ) .content ( 최소 높이: calc(100vh - 80px); )

방법 #5

이것은 아마도 제시된 모든 방법 중 가장 좋은 방법이지만 최신 브라우저에서만 작동합니다. 세 번째 방법과 마찬가지로 바닥글의 높이는 중요하지 않습니다.

* ( 여백: 0; 패딩: 0; ) html, body ( 높이: 100%; ) .wrapper ( 디스플레이: flex; flex-direction: 열; 높이: 100%; ) .content ( flex: 1 0 자동; ) .footer (플렉스: 0 0 자동; )

방법 #6

다양한 사례에 대한 전체 라이브러리(Flexbox 사용)

블라드 메르제비치

웹 개발자의 전문 용어로 바닥글은 사이트의 하단 부분으로 저작권이 기록되고 연락처가 게시되며 다양한 카운터가 표시되고 유사한 정보가 표시됩니다. 일반적으로 바닥글은 모든 콘텐츠 뒤에 위치하며 페이지를 스크롤할 때만 표시됩니다. 어떤 경우에는 페이지 높이에 상관없이 항상 바닥글에 액세스할 수 있도록 하고 브라우저 창 하단에 고정하는 것이 바람직합니다.

이를 위해 position 속성과 해당 값을 사용하겠습니다. 이 경우 요소는 한 곳에 유지되며 위치는 top , right , Bottom , left 속성을 통해 좌표로 지정됩니다. 우리의 경우 왼쪽과 아래쪽을 0 값으로 설정하는 것으로 충분합니다. 고정 요소의 너비는 내용과 동일하며 배경색이나 이미지를 추가하면 명확하게 표시되므로 너비를 100%로 사용하여 너비도 설정해야 합니다(예 1).

예 1: 고정된 지하실

예제의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 페이지 하단의 바닥글

Internet Explorer 6에서는 고정값을 지원하지 않으므로 이 예제에서는 제대로 작동하지 않습니다. IE6의 경우 코드에 두 개의 태그를 추가해야 합니다.