2011-08-23 4 views
0

여기에 훨씬 간단한 예가 나와 있습니다. http://jsfiddle.net/guard/MmcEY/3/ 실제 앱에는 해당되지 않지만 인체 폭은 인위적으로 거부됩니다. 아래를 참조하십시오.콘텐츠 너비가 본체 너비보다 큽니까?

# d1 및 # d2와 비슷한 여러 개의 블록이 있습니다. 모두 최소 너비 세트가 있습니다. 화면 하단에는 전체 너비를 채워야하는 스트라이프가 있습니다.

와이드 스크린에서는 모든 것이 잘 작동합니다. 블록을 넣을만큼의 몸체 너비가 있습니다. 스크롤링이없고 스트라이프가 전체 화면 너비를 채 웁니다.

좁은 화면 (명시 적으로 설정된 본문의 너비가있는 예제에서 에뮬레이트 됨)에서 다음과 같은 현상이 발생합니다. 내용의 너비가 실제로 본문의 너비보다 큽니다. 이 내용은 몸을 늘리지 않지만 가로 스크롤을 표시합니다. 따라서 스트라이프 (하단의 녹색 선)는 페이지 내용보다 적은 공간을 차지합니다.

=====

음, 좋은, 사람, 나는 그 때문에 마진의 알고 :).

내가 말했듯이, 고정 된 몸체 폭은 데모 용으로 만 여기에 설정되며 실제 세계에서는 몸체 폭이 창 크기로 정의됩니다. 그러나 몇 개의 블록이 여전히 몸 바깥에 있으므로 스크롤이 나타나고 몸통 폭은 변하지 않습니다.

그래서 나머지 마크 업을 보존하면서 스트라이프가 전체 창 클라이언트 너비을 채우는 방법은 있습니까 ?

기존 사이트에서 작업 중이며 전체 레이아웃을 완전히 해킹하고 싶지 않습니다. (매우 복잡하고 나로 코딩되지 않았습니다.)

+0

사이트에 대한 링크를 제공 할 수 있습니까? 사람들이이를 실제로 보도록 도울 것입니다. –

+0

최소한의 예제로 이것을 생략하려고했습니다. 나는 아마도 더 좋은 것을 만들어야 할 것이다. – Guard

답변

1

귀하의 #d2 요소가 음수 인 margin-right 세트를 가지고 있습니다. 이는 해당 요소가 body 요소 외부에 있음을 의미합니다. 이 속성을 제거하면 블럭이 다음 줄로 넘어지는 것을 볼 수 있습니다 (#d1#d2은 모두 150px 임).

본질적으로 레이아웃은 당신이하고 싶은 것을하고 있습니다. 스트라이프는 브라우저 창 크기에 관계없이 항상 200px 와이드 (몸체 너비의 100 %)입니다.

+0

see upd, please – Guard

0

두 번째 div에 -200px의 여백이 있기 때문입니다. 이렇게하면 브라우저가 -50 픽셀 너비로 생각하므로 브라우저의 div가 서로 딱 맞을 수 있습니다.이 콘텐츠의 일부가 몸 밖에서 렌더링 되더라도.

이렇게 : 여백을 잃으십시오. :)

+0

upd를 참조해라. – Guard

+0

나는 당신의 업데이트를 본다. 그러나 나는 그것이 어떻게 대답을 바꾸는지를 보지 못했다. 150px의 최소 너비가 존중됩니다. 즉, 몸 너비가 300px 이하로 줄어들면 두 번째 div가 아래로 줄 것입니다. 그러나 그것이 작동하지 못하게하는 것은 그 차이입니다. 또한 몸에 여백이나 패딩이 있고 스트립 너비를 100 %로 설정하면 몸의 클라이언트 크기보다 커집니다. 이 여백을 포함하여 전체 너비까지 커집니다. 본문 클라이언트 너비를 채우려면 스트라이프의 너비를 건너 뜁니다. 기본적으로 공간을 채 웁니다. – GolezTrol

+0

본체가 작아지지 않도록 본체에서 최소 너비를 300px로 설정할 수 있습니다. 그러나 나는 당신이 그것을 어떻게 보이길 원하는지 정확하게 모르겠습니다.스트라이프가 300px의 최소 너비를 따르도록 만드시겠습니까? 아니면 서로 맞지 않을 때 div1 아래에 div2를 배치 하시겠습니까? – GolezTrol

관련 문제