고정 바닥 글을 만드는 솔루션을 찾았습니다.
html {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
left: 0; right: 0;
}
I가 궁금하지만 어떻게 그것을 넣어하는 것입니다 조언 position:relative온 html태그입니다.
내가 이해하는 방식 : position: absolute뷰포트에 상대적인 것이 아니라 문서에 상대적이됩니다.
이것이 좋은 습관입니까?
루트 요소 html는 다른 요소와 마찬가지로 CSS로 스타일을 지정할 수 있지만 특정 속성은 루트 요소이기 때문에 다르게 동작 할 수 있습니다. position이러한 속성 중 하나입니다. 특히 사양 에는 다음과 같은 내용이 있습니다.
사용자 에이전트는 루트 요소에서 위치를 '정적'으로 취급 할 수 있습니다.
내가 아는 한, 최신 브라우저는 실제로 이것을 수행하지 않지만 position: relative항상 루트 요소에서 작동 한다는 보장은 없습니다 . 귀하의 경우 요소 대신 요소를 설정 position: relative하여 간단히 피할 수 있습니다 .bodyhtml
body {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
left: 0; right: 0;
}
본문이 뷰포트의 높이에 도달하지 않으면 (예 : 페이지에 콘텐츠가 충분하지 않은 경우) 바닥 글이 페이지 하단에 고정되지 않습니다. 이것은 당신을위한 문제 설정의 경우 height와 min-height에 html와 body내 대답의 지침에 따라 여기가 :
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0;
left: 0; right: 0;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다