2013-02-20 6 views
0

내 CSS 클래스 바닥 글은 페이지의 전체 바닥을 확장하지 않습니다. 브라우저 윈도우가 충분히 작 으면 제대로 작동하지만 윈도우 크기가 충분하면 오른쪽 및 왼쪽 사이드 엔드와 페이지 배경이 보입니다. 클래스는 다른 클래스에 중첩되지 않으며 유일한 부모는 및 태그입니다. 당신이 무슨 뜻인지 볼 수 있도록어떻게 화면의 오른쪽에 왼쪽에서 내 CSS 클래스 바닥 글 이동을해야합니까?

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background-color:#d9d9d9;} 
.Footer p { color:#959595; padding:0; margin:0; font:normal 10px 'Verdana';} 
.Footer a { color:#959595; text-decoration:underline;} 

페이지는 avidest.com에 최대입니다 : 여기에 바닥 글에 대한 CSS입니다. 어떤 도움을 주시면 감사하겠습니다. 감사.

답변

2
는 주요 컨테이너, bgRasize의 외부 Footer 블록을 이동

하고, 페이지의 폭에 걸쳐해야한다. 컨테이너의 너비는 현재 100 %입니다. 세 가지에 대한

<div class="bgRasize"> 
    ... other content 
</div> 

<div class="Footer"> 
    ... footer content 
</div> 
+0

감사합니다. 즉, 바닥 글의 왼쪽을 처리했다,하지만 페이지가 너무 작고, 오른쪽으로 스크롤 할 경우 지금, 바닥 글은 여전히이 가정되기 전에 종료되고 또한 바닥 글에 텍스트가 나머지 움직이지 페이지의 그 문제를 해결하는 방법에 대한 아이디어가 있습니까? – Philip7899

+0

'.Footer'의'min-width'를 메인 컨테이너 너비의 크기, 즉'min-width : 1024px;와 같이 설정하십시오. – sbeliv01

+0

훌륭합니다, 고맙습니다! – Philip7899

1

점검 :

  1. .Footer 요소는 <body> 태그의 직접적인 아이입니다. 뷰포트의 가장자리를 만지지됩니다 요소를 확인하려면
  2. <body>padding: 0; margin: 0;이 있어야합니다. 클래스 .Footer를 가진 요소가 블록 요소가 기본적으로없는 경우
  3. 당신은 명시 적으로 display: block;에의 표시 스타일을 설정해야합니다.

태그 계층 구조는 다음과 같아야합니다

<body> 
    <!-- Page content. --> 
    <div class="Footer"></div> 
</body>