2011-12-11 3 views
3

간단한 해결책이 있다고 상상하지만 저를 멀리합니다. this page을 보면 머리글 만 회색 배경으로 표시됩니다. 그것은 단지 페이지의 헤더 부분을 스트레칭하는 순간컨테이너 DIV가 절대 위치 지정이있는 DIV를 포함하도록 확장되지 않음

#container { 
    padding: 0; 
    margin: 0; 
    background-color: #292929; 
    width: 1200px; 
    margin: 0 auto; 
} 

, 아래 내용 : 회색 배경은 내가 페이지의 전체 높이를 스트레칭하고 싶은 이는 #container의 DIV에 의해 설정된다 그 안에 포함되어 있지 않습니다. #content DIV의 주 콘텐츠가 절대 위치 지정을 가지고 있기 때문에 이것이 상상할 수 있습니다.이 div의 위치에 대한 일부 애니메이션을 수행 할 수 있어야합니다 (탐색 막대 이미지 위로 마우스를 가져 가면 볼 수 있습니다). 절대 위치로 된 DIV가 부모 div를 높이에 포함되지 않은,하지만 난이 문제를 해결하는 방법을 잘 모르겠습니다되는 것으로 보인다 일부 연구에서

#content { 
    font-family: Lucida sans unicode !important; 
    color: #CECBBB; 
    text-align: justify; 
    position: absolute; 
    top: 210px; 
    padding: 20px 40px; 
} 

.

일부 도움에 감사드립니다.

감사합니다,

답변

3

당신이 (당신은 아마 어떤 위치를 조정해야합니다 #content 자체에 background-color: #292929를 넣어 중 하나입니다 원하는 배경을 얻을 #content (당신이 당신의 질문에 상태로) 절대 위치 후 가장 좋은 방법을해야하는 경우 검은 색을 제거하기위한 패딩).

그러나 애니메이션이 가져가 열립니다 상단의 하위 메뉴 인 경우, 그때 position: relative,에 메뉴와 내용 모두 된 div를 설정하는 것이 좋습니다 대신 당신의 스크립트로 나타나는합니다 (#contenttop 위치를 애니메이션 메뉴의 height에 애니메이션을 적용하고 (기본값으로 0으로 설정하고 높이가 45px 인 애니메이션으로 애니메이션을 실행합니다.

+0

@ Nick - 당신이 거기에오고있는 것처럼 보입니다. 나는 지금 배경을보고, 너는 공중 선회에 종사하고있는 것처럼 보인다. 나는 당신이 기대했던대로 기능을 발휘할 것이라고 생각합니다. – ScottS

+0

예, 배경을 정렬했지만 하위 메뉴가 사용자의 방법을 사용하기를 원했기 때문에 작동하지 않습니다. 나는 slideDown/Up과 페이드를 보존하고 싶지만 이것을하는 법을 배울 수는 없다. 이 [여기] (http://stackoverflow.com/questions/8464707/script-to-animate-height-of-div-is-changing-the-height-of-div- 갑작스러운)에 대한 내 질문을 볼 수 있습니다. – Nick

8

예, 맞아요. 절대 위치 지정이있는 요소은 상위 컨테이너의 레이아웃에서 더 이상 고려되지 않습니다. 더 잘 이해하려면 CSS Positioning from A List Apart을 읽는 것이 좋습니다.

  1. 가 사용 대신 절대 위치 레이아웃
  2. 하드 코딩 항상 container 요소의 높이를 업데이트 할 수 container 요소
  3. 를 사용하여 자바 스크립트의 높이, 레이아웃을 떴다 :

    IMHO, 당신은 많은 솔루션을 가지고있다.

+0

FLOAT !!! 고마워요! – RozzA

0
#content { 
    color: #CECBBB; 
    font-family: Lucida sans unicode !important; 
    margin-top: 40px; 
    padding: 20px 40px; 
    text-align: justify; 
} 

여백 정상을 추가하고이 작업을 수행 할 것 절대 위치를 제거합니다.

관련 문제