내 CSS 고정 바닥글이 원치 않는 스크롤바 및 배경 문제를 일으키는 이유는 무엇입니까?

CSS 고정 바닥글 문제 이해

CSS 고정 바닥글을 구현하면 원하지 않는 스크롤 막대가 나타나 콘텐츠가 컨테이너 밖으로 확장될 수 있습니다. 또한 배경 이미지가 페이지를 완전히 덮지 못할 수도 있습니다.

이 문제를 해결하려면 제공된 HTML 및 CSS를 살펴보겠습니다. 코드:

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#content {
    height:100%;
    min-height:100%;
}

문제:

높이와 높이를 모두 설정하면 문제가 발생합니다. 최소 높이를 100%로 설정합니다. 이렇게 하면 콘텐츠 영역이 특정 높이로 고정되어 지정된 크기 이상으로 확장되지 않습니다. 그러나 콘텐츠 div 내의 콘텐츠가 지정된 높이를 초과하여 오버플로 및 스크롤 막대가 발생할 수 있습니다.

해결책 1: CSS Tricks Sticky Footer Snippet

CSS Tricks를 방문하세요. 다음을 사용하여 고정 바닥글을 만들기 위해 특별히 설계된 코드 조각을 얻으려면 웹사이트를 방문하세요. CSS.

html, body { height:100%; }
#wrapper { min-height:100%; position:relative; }
#footer { position:absolute; bottom:0; width:100%; }

해결책 2: jQuery 고정 바닥글 스니펫

jQuery를 사용하는 것이 옵션인 경우 CSS Tricks는 jQuery 기반 고정 바닥글 스니펫도 제공합니다.

$(document).ready(function() {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    footer.css({
        top: height - pos.bottom
    });
});

이러한 솔루션을 구현하면 고정 바닥글 동작을 달성할 수 있습니다. 콘텐츠 영역을 콘텐츠에 따라 동적으로 확장하여 원하지 않는 스크롤 막대를 제거하고 배경 이미지가 페이지를 완전히 덮도록 합니다.