div에 포함 된 콘텐츠의 높이를 조정하는 방법은 무엇입니까?

Question

나는 내 콘텐츠가 들어있는 "주 콘텐츠"div가 있습니다. 거기에 몇 가지 자바 스크립트 (Fancybox) 이미지를 표시합니다. div의 높이가 자동으로 변경되어 div의 내용이 스크롤되지 않도록 전체 웹 페이지가 포함되도록 변경하려고합니다. 자동차, 오버 플로우 : 나는 분 - 높이, 높이 장난 해봤 http://willryan.us/content/photo.html

: 등 자동차,, 아니 결과

는 여기에 내가 해결하고 싶은 페이지입니다. Height : auto는 텍스트가 javascript 이미지를 완전히 무시하는 것처럼 div에서 유일한 것임을 알리는 역할을합니다. 그것은 지금처럼

여기 내 CSS의 :

div#content { 
overflow:auto; 
width:958px; 
height: 800px; 
position:absolute; 
top:50px; 
left:0px; 
background-color:#C0CACE; 

border:1px solid; 
border-color:#616161; 

-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
z-index:1; 

}

Answer 1

귀하의 문제는 절대 위치를 사용하여있다. 정기적 인 문서 흐름을 위해 정적 위치 지정 (기본값)을 사용하면이 문제가 발생하지 않습니다.

당신은 하나 상대 위치를 사용하지 않는

UPDATE.

정규 문서 플로우 (명시 적으로 지정하지 않고)는 position: static;이며 절대 사용합니다. 절대 위치 지정은 기본적으로 문서의 규칙적인 흐름에서 요소를 가져와 가장 가까운 위치에있는 부모를 기준으로 배치합니다.

해야 할 일 ... 래퍼가 "가운데"에 있어야합니다. "래퍼"를 positon:relative으로 설정하고 margin: 0px auto;으로 설정하고 모든 내부 요소에서 절대 위치를 제거하십시오. 래퍼 내부에있는 요소를 들여 쓰기해야한다면 패딩/여백을 사용하십시오.

Answer 2

문제는 photobox div와 관련이 있습니다. 위치 절대 값을 끄면 높이가 작동하고 높이가 낮아집니다.

절대 위치 지정 기능을 사용하지 않을 경우이 문제는 피할 수 있습니다.

상대 위치 지정을 사용하여 페이지를 다시 빌드해야합니다. 부모가 text-align:center;과 함께 사용하는 div를 센터에 배치해야한다고 생각하면 꽤 쉽습니다.

Answer 3

position: relative 을 사용하면 주 내용 자녀에게 position:absolute을 사용하지 말 것을 권장합니다. 여기서 절대적으로 필요한 것은 아닙니다.

1. 제거 #content 높이 (또는 최소 높이 사용)
2. 제거 #photobox 높이 (또는 최소 높이를 사용할) 필요 (
3. 상대적으로 설정된 모든 #content 아이들 위치 #content 오버플
4. 제거를 사용 마진)

.

div#header { 
    background-image:url(content/assets/elements/header.png);backround-repeat:none; 
    width:960px; 
    height:50px; 
    z-index:2; 
    -webkit-border-radius: 10px 10px 0px 0px; 
    border-radius: 10px 10px 0px 0px; 
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); 
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); 
} 

div#footer { 
    background-image:url(content/assets/elements/footer.png); 
    backround-repeat:none; 
    width:960px; 
    height:50px; 
    z-index:2; 
    -webkit-border-radius: 0px 0px 10px 10px; 
    border-radius: 0px 0px 10px 10px; 
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); 
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); 
} 

div#content { 
    width:958px; 
    background-color:#C0CACE; 
    border:1px solid; 
    border-color:#616161; 
    -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
    z-index:1; 
    overflow: visible; 
} 

div#photobox { 
    width: 769px; 
    margin-left: 95.5px; 
}