바닥 글이 왼쪽에서 오른쪽으로 계속 이동하는 이유는 무엇입니까?

Question

내 CSS 클래스 바닥 글의 배경이 브라우저를 넓게 유지하는 방식에 따라 브라우저의 전체 너비를 가로 지르지 않습니다. 기본 콘텐츠가 끝나기 전에 바닥 글이 끝나기 때문에 페이지가 이상하게 보입니다. 이 사이트는 avidest.com에 올라있어서 내가 말하는 것을 볼 수 있습니다.

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;} 

는 CSS를 원래했다 : 다음은 CSS입니다

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9;} 

하지만 그 중 하나가 작동하지 않았다. 어떻게 브라우저의 왼쪽에서 오른쪽으로 끝까지 바닥 글을 만들 수 있습니까?

감사합니다.

Answer 1

내에서 그것이 용기가 될 수있다 생각합니다.

요소를 플로팅하면 해당 요소는 문서 흐름에서 벗어납니다. 이것이 의미하는 바는이 요소의 실제 크기는 레이아웃 할 때 고려하지 않아야한다는 것입니다.

일반적으로 플로팅 요소에서이 동작을 원하지 않으므로이 문제를 방지하는 한 가지 방법은 부모 컨테이너에 overflow: auto을 설정하는 것입니다.

또한 헤더 레이아웃이 이상하게 보입니다. 결정적인 해결책이있을 때이를 업데이트하겠습니다.

첫 번째 업데이트 : 내가 추가 한 가 떴다 요소와 모든 부모에 overflow: auto을했다 지금은 나를 위해 작동합니다. 다음과 같은 요소에 해당 규칙을 추가하십시오 :

.Header 
.Logo 
.body 

이 페이지가 지저분 모양이 변경 (특히, 주위에 많은 스크롤바가있을 것이다)와 유의하시기 바랍니다.

너무 엄격한 설정을했기 때문입니다. 대신 자연스럽게 물건을 흐르게 할 것입니다. 예 :

• 설정 로고 크기는 필수 사항이 아닙니다.
• 헤더에 글 머리 기호가 너무 적습니다. 나는 그것을 역시 제거 할 것이다.

내가 할 수있는 또 다른 일은 배경 이미지를 3 (또는 2 이상, 헤더 및 콘텐츠)로 분할하는 것입니다. 그렇게하면 일이 좀 더 분리되고 쉽게 바뀔 수 있습니다. 각각의 '논리적'블록 (헤더, 꼬리말, 사이드 바, 로그인 폼)을 나머지 모듈 (이미지, 클래스 등)과 공유해서는 안되는 독립적 인 모듈로 생각하십시오.

이 모든 내용은 설명에 설명되어 있지 않지만 미안하지만 언제든지 문의 해 주시기 바랍니다.

Answer 2

왼쪽 및 오른쪽 픽셀을 0으로 시도 했습니까?

.Footer { left:0px; right:0px; padding-bottom:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;} 

나는이 오류가 모든 열 및 헤더를 떠와 관련이있는 것으로 보인다는 크롬 관리자와 웹 페이지를 보면