2011-09-26 3 views
0

div (헤더라고 부름)와 div (통화 내용이 있습니다)가 있습니다. 이제 콘텐츠 div는 콘텐츠의 높이를 확장합니다. 헤더 내에는 내용과 겹치는 요소가 있지만 내용 div는 헤더에서 겹치는 요소로 확장되지 않습니다. Heres 내가 지금까지 가지고있는 CSS :다른 div의 요소가 겹칠 때 div가 확장됩니까?

.content { 
height:auto; 
} 

어떤 제안? 자식 사업부는 모든 것의 위에 그 스택 방법을 의미, 무엇보다 높은 Z 인덱스를 가지고 있으며,이 때문에 그 위치에 문서 "흐름"에 참여하지 않기 때문이다

http://jsfiddle.net/pgvZr/

+1

자세한 내용을 입력해야합니다. 어쩌면 귀하의 HTML, 작업 페이지에 대한 링크, jsfiddle 데모 등 –

+1

어쩌면 몇 가지 예? – simoncereska

+0

모든 코드를 콘텐츠 내부 및 콘텐츠 div 자체에 게시하십시오. –

답변

-2

. JQuery를 사용하여 다른 두 div의 높이를 기준으로 높이를 계산하고 설정하는 것이 좋습니다.

+1

아니요, z- 색인은 하위 항목과 상위 항목 사이의 콘텐츠 상호 작용 (예 : '# header'및 해당 콘텐츠)에 영향을 미치지 않습니다. 절대적으로 배치 된 요소는 (위 또는 아래에 스태킹되지 않고) 어떤 것과도 상호 작용하지 않습니다. 떠 다니는 아이들에게도 마찬가지입니다. 그들은 비거주가없는 부모가 아닌 부모의 키에 영향을 미치지 않습니다. – Pat

0

"콘텐츠"div가 푸시 다운되지 않는 이유는 "헤더"div에 높이를 설정했기 때문입니다. 따라서 '헤더'div와 관련하여 '콘텐츠'div는 100 픽셀 아래로 시작됩니다. 높이를 설정하지 않으면 "header"div가 그 안에 포함 된 모든 높이가됩니다.

이 피들을보세요 ... 단순히 height: 100px;을 헤더에서 제거하면 원하는 것을 성취 할 수 있습니다. http://jsfiddle.net/pgvZr/4/


편집 : 머리글에 내용을 추가하고 싶은 경우는 콘텐츠 사업부의 일부가 될 (즉, 콘텐츠 사업부는 header_inner 텍스트로 성장이)가, 그때는 아마해야 그냥 콘텐츠 div로 이동하십시오. 그렇지 않으면 헤더의 높이를 지정하지 말고, 필자 피들처럼 header_inner를 추가 할 때 콘텐츠 div를 자동으로 푸시하도록합니다.

+0

이것은 맞습니다.하지만 그의 의도가 그의 의도인지 확실하지 않습니다. 나는 그가 푸른 컨텐트 영역으로 확장하고 싶어한다고 생각하는데, 이것보다 더 많은 것을 취할 것입니다. –

+0

그래서 내용은 푸시 다운되는 것이 아니라 머리글을 따라 높이가 커지고 있습니까? – kafuchau

+0

네, 저에게 그들이 원하는대로 응답을 기다리고 있습니다. 제로 인이 그 소리를 들었을 지 모릅니다. –

0

문제를 잘 모르겠습니다. header_inner에 텍스트를 추가하여 콘텐츠 높이를 확장 하시겠습니까?

+0

예. 올바르다. –

+0

.content 안에 header_inner가 없습니까? – simoncereska

1

headercontent은 형제 자매이다, 그래서 그냥 CSS를

문제를 해결하기 위해 당신이 할 수있는 사용 header의 일부 콘텐츠로 확장 content을 할 수있는 방법이 없습니다 :

  • 사용하는 자바 스크립트로는 높이를 계산하고 content은 동적으로 설정해야합니다.
  • headercontent 안에 넣고 고정 높이를 content
관련 문제