내 바닥이 내 웹 페이지 중간에있는 이유는 무엇입니까?

웹 페이지 바닥 글은 웹 페이지의 가운데에 표시 될 수 있으며 여러 가지 이유로 맨 아래에 표시되지는 않습니다. 가장 일반적인 것 중 하나는 웹 사이트 콘텐츠가 작고 바닥 글이 가운데로 밀려 나옵니다. 바닥 글이있는 컨테이너가 잘못 코딩되었을 수 있으며 여백 또는 패딩이 잘못되어 "float"속성이 잘못되었을 수 있습니다.

꼬리말 위치

바닥 글 CSS "위치"속성은 머리글 및 본문 내용과 같은 다른 페이지 요소와 관련하여 웹 페이지에서 바닥 글의 위치를 ​​결정합니다. 5 가지 유형의 위치 지정은 고정 위치, 고정 위치, 상대 위치, 중첩 위치 및 절대 위치입니다. 바닥 글에서 절대 위치 지정은 바닥 글 요소가 다른 요소와 관련하여 동작하지 않도록하기 위해 사용됩니다. "position : absolute;"를 추가하십시오. "#footer"브래킷 "{"및 "}"태그 내에서 코딩합니다. 또한 "bottom : 0;"을 추가하십시오. "위치"코딩 바로 아래 줄에 있습니다. 이제 바닥 글은 웹 페이지 "DIV"컨테이너의 맨 아래에 절대적으로 배치됩니다.

바닥 글 너비 및 높이

바닥 글 너비 및 높이 속성이 바닥 글 위치를 방해 할 수 있습니다. 꼬리말이 너무 크면 웹 페이지 하단에 너무 많은 공간을 차지합니다. "#footer"대괄호 태그 인 "{"및 "}"에는 "width : Xpx;"가 표시됩니다. 및 "높이 : Xpx;" 코딩. 바닥 글을 웹 사이트 콘텐츠의 나머지 부분만큼 넓게 만들려면 너비를 "100 %"로 변경하십시오. 높이를 원하는 픽셀 크기 (예 : "60px"또는 "75px")로 변경하십시오. 이 두 가지 변경 사항은 바닥 글이 웹 페이지의 맨 아래로 밀려나는 원인이 될 수 있습니다.

여백 및 여백

여백 및 패딩 코딩은 바닥 글 위치를 방해 할 수 있습니다. 바닥 글 여백이 너무 좁거나 여백이 너무 넓 으면 바닥 글 위치가 이동하여 웹 페이지의 가운데로 이동할 수 있습니다. 하나의 쉬운 솔루션은 마진과 패딩을 완전히 제거하여 나머지 바닥 글 속성이 나머지 코딩과 일치하도록하는 것입니다. 웹 페이지 코딩에서 "#footer"속성을 찾습니다. "{"와 "}"의 괄호 태그 안에는 "여백 : Xpx Xpx Xpx Xpx;"가 있습니다. 및 "패딩 : Xpx Xpx Xpx Xpx;" 코딩. 이제 바닥 글 여백 및 패딩은 웹 페이지의 맨 위에있는 "#body"및 "#container"태그에 의해 결정됩니다. 두 코딩 줄을 모두 제거하고 웹 페이지를 새로 고칩니다.

컨테이너 레이아웃

웹 사이트 바닥 글은 전체 DIV 컨테이너 레이아웃 내에 배치되는 요소 중 하나입니다. 컨테이너 레이아웃 속성이 올바르지 않으면 웹 페이지의 바닥 글 위치에 영향을 미칠 수 있습니다. "#"컨테이너 태그 "{"와 "}"의 내부에는 동일한 "높이"및 "위치"속성이 있습니다. "높이"를 100 %로 변경하고 "위치"를 상대적으로 변경하십시오. "#container"에 새로운 코딩 라인을 추가하고 "min-height : 100 %;"라고 입력하면 전체 컨테이너 레이아웃에 새로운 최소 높이가 부여됩니다. 이제 전체 웹 페이지는 콘텐츠의 양에 관계없이 화면의 전체 높이를 유지합니다. 상대 위치는 또한 바닥 글의 절대 위치와 적극적으로 상호 작용합니다.