2010-02-18 2 views
1

방금이 사이트 (www.imustsolutions.co.za)를 다시 디자인했으며 사용자가 확대 (Cntrl + FF) 할 때 머리말과 꼬리말에 문제가 있습니다. . 바닥 글/헤더의 배경 색상이 화면 (수평) 사용자가 줌인 할 때CSS 머리말 및 꼬리말이 깨져서 확대됩니다.

내가 잘못 뭐하는 거지의 나머지 부분을 채우기 위해 페인트하지 않습니다 : 여기

문제인가? www.imustsolutions.co.za 사전에

감사 : 여기

다시 사이트입니다.

감사합니다,이 일을 해야하는 방법 기본적입니다 M

+0

전체 텍스트 만 확대/축소 할 수 있습니다. FF3.6, Windows 7, 1920 x 1080 픽셀. –

+0

1680 x 1050, ff3.6 win7 또한 괜찮습니다 .. 그런데 좋은 웹 사이트, 어쩌면 보더에 조금 더 많은 작업이 있습니다 – ant

+0

여기에서 작동합니다 ... FF 3.6 Vista - 1920x1200 Pixels –

답변

1

. The width of a block-level element은 포함하는 블록의 너비에 따라 결정됩니다. 그리고 the width of the initial containing block (즉, html 요소의 포함 블록)은 "뷰포트"(즉, 브라우저 창)의 크기를가집니다.

즉, 명시 적으로 블록의 너비를 설정하여 뷰포트보다 넓게 설정하지 않으면 뷰포트보다 넓지 않습니다.

StackOverflow 자체의 바닥 글에서도 같은 일이 발생합니다. 예를 들어 수평 스크롤 막대가 생길 때까지이 페이지를 확대하면 회색 배경이 잘 리게됩니다. .

the width of floating elements이 내용의 크기에 맞게 축소되고 뷰포트의 크기에 영향을주지 않으므로 전체 페이지를 플로트로 바꿀 수 있습니다.

html 또는 body 태그에 float: left을 단순히 추가하는 것이 트릭을 수행해야합니다. 그래도 모든 브라우저에서 테스트하지는 못했습니다.

+0

'body' 또는'html'에'float : left'를 추가하면 브라우저의 왼쪽에 전체 사이트가 나타납니다. 너는 다른 고치가 있니 ?? – krish

+0

@krish'body :'에'display : table' 또는'display : inline-block'을 추가해보세요. – mercator

3

문제는 헤더의 너비가 100 % (원래 브라우저 창의 100 %)로 설정되지만 기본 콘텐츠는 980px로 설정된다는 것입니다.

풀 사이즈 모드에서는 100 %가 980px보다 커지지 만 크기를 조정하거나 확대하면 100 %가 980px보다 작아지고 머리글은 중단되지만 기본 콘텐츠는 오른쪽으로 넘치고, 필요하다면.

머리글과 바닥 글의 최소 너비는 주 내용의 너비 (더한 경우 여백과 여백을 더한 값)와 같은 값으로 설정하면 대개 이러한 문제를 해결할 수 있습니다. 귀하의 사이트에 관련하여

, 그것은 당신의 주 내용은 980 픽셀로 설정되어 보인다 당신은 시도 할 수 있습니다 :

#header {min-width:980px;}

0

귀하의 머리글과 바닥 글 DOM 요소가 메인 컨텐츠 내에 배치해야합니다. 따라서 머리글 100 %는 주 콘텐츠 크기에 따라 제한됩니다. 980px

관련 문제