Google 정신 분석 서비스 2011과 같이 유동적 인 콘텐츠를 얻으려면 어떻게해야하나요?

Question

내 웹 사이트 : http://designobvio.us/portfolio/index.html

주목받는 웹 사이트 레이아웃 : 난 그냥 위치에 고정되어 내 탐색 모음을 완료했습니다 http://www.googlezeitgeist.com/en/top-searches/rebecca_black

. 이제 센터 콘텐츠로 이동할 때입니다. 불행히도 이것을 표시하는 방법에 대해 저는 당황 스럽습니다.

문제 1 : 모든 것이 100 % 높이 것 같다 (I 작동시킬 수 결코> _ < ;;)

문제 2 : 내가 grid960을 사용하고 있는데 이미지가 960 그리드 위에 표시됩니다.

문제 3 : 창 이미지 축소시 축소.

문제 4 : 창 텍스트 패널을 축소하면 이미지가 오버레이됩니다.

레이아웃의 PDF를 완성했습니다. 여기에 격자 오버레이를 사용한 예가 나와 있습니다. http://www.designobvio.us/portfolio/homepage%20copy.pdf

jsfiddle에서이 레이아웃을 시연 할 수있는 사람이 있습니까? 나는 정말로 꽤 난처하게 굴었다.

감사

Answer 1

• 100 % 높이 요소가 부모 구성 요소의 높이를 사용하는 것을 의미한다. div의 #wrapper가 창 높이의 100 %가되도록하려면 상위가 100 % 높이로 설정되어야합니다. 그래서 기본적으로 : html, body, #wrapper {height: 100%;} 예 : http://jsfiddle.net/Vy6hP/
• 왜 떠 다니는 문제입니까? 그리고 동적 레이아웃을 만들고 싶다면 960 시스템을 사용하지 말고 유연한 시스템을 사용해야합니다 (예 : px가 아닌 %를 기반으로 한 시스템)
• 이미지를 max-width: 100%;으로 지정하면됩니다. 좋아요 (예 : http://jsfiddle.net/Vy6hP/1/)
• 마지막 질문을 모르겠습니다.