전체 페이지 너비를 차지하지 않는 바닥글을 수정하는 방법은 무엇입니까?

고정 바닥글 딜레마 해결

스타일 지정 시도에도 불구하고 "바닥글" div가 차지하지 못하는 문제가 발생했습니다. 전체 페이지 너비로, 그 아래에 보이는 공백을 남겨둡니다. CSS 코드를 자세히 살펴보고 해결책을 찾아보겠습니다.

현재 CSS에는 상위 컨테이너를 기준으로 바닥글의 위치를 ​​지정하고 수직으로 490만큼 오프셋하는 '위치: 상대' 및 '상단: 490px'와 같은 속성이 포함되어 있습니다. 픽셀. 이 접근 방식은 기본 시나리오에서 작동할 수 있지만 특히 페이지 콘텐츠가 동적으로 변경되는 경우 바닥글이 항상 페이지 하단에 고정된다는 보장은 없습니다.

대신 대체 기술을 살펴보겠습니다.

1. 고정 바닥글 방법:

이 방법은 뷰포트를 채울 콘텐츠가 충분하지 않은 경우에도 바닥글이 페이지 하단에 유지되도록 하는 영리한 CSS 기술을 활용합니다. 여기에는 '래퍼' div에서 '최소 높이' 속성을 100%로 설정하고 '바닥글' 및 '푸시' div 모두에서 '높이'를 '142px'로 설정하는 작업이 포함됩니다.

html ,<br>몸체 {<br> 높이: 100%;<br>}</p><p>.wrapper {<br> 최소 높이: 100%;<br> 높이: 자동 !important;<br> 높이: 100%;<br>}</p><p>.footer,<br>.push {<br> 키: 142px;<br>}<br>

2. Flexbox 바닥글 방법:

이 접근 방식은 Flexbox 레이아웃 모듈을 활용하여 페이지 하단에 바닥글을 배치합니다. 해당 요소를 수직으로 정렬하려면 '래퍼' div 및 'flex-direction: 열'에 'display: flex'를 설정하세요. 그런 다음 'main' div에 'flex-grow: 1'을 설정하고 'footer' div에 'flex-shrink: 0'을 설정합니다.

.wrapper {<br> display: flex ;<br> 플렉스 방향: 열;<br>}</p><p>.main {<br> 플렉스 성장: 1;<br>}</p><p>.footer {<br> flex-shrink: 0;<br>}<br>

이것의 이점 방법:

• 페이지 하단에 바닥글 위치 지정: 두 방법 모두 바닥글이 페이지 하단에 고정되어 유지되도록 보장합니다.
• 바닥글 아래 공백 제거: 이 기술은 바닥글 아래에 보기 흉한 공백이 나타나는 것을 방지합니다. 바닥글.
• 콘텐츠 변경에 반응: 이 방법은 페이지 콘텐츠의 높이에 따라 바닥글 위치를 자동으로 조정하여 일관되고 시각적으로 매력적인 레이아웃을 보장합니다.

위 내용은 전체 페이지 너비를 차지하지 않는 바닥글을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!