중첩 된 Div가 컨테이너에 잘 맞지 않습니다. Div

Question

다른 컨테이너 div (panelContainer) 내에서 만들어지는 dojox 차트 (chartDiv)가 있습니다.

chartDiv의 너비와 높이가 90 %로 설정되어 있어도 chartDiv에 스크롤 막대가 삽입되거나 ChartDiv에 대해 패딩과 여백 설정을 변경하면 dtart가 외부로 유출됩니다. 부모 컨테이너.

나는 이것이 기본적인 문제가 될 것이라는 것을 알고 있지만, 다른 CSS 설정을 많이 사용하고 있지만 panelContainer의 경계 내에서 chartDiv를 유지하는 문제는 해결되지 않는 것으로 보입니다 (공간의 95 % 차지)

This fiddle 내가 잘못 될 위치를 자리 도움이 될 수 있습니다.

Answer 1

너비/높이가없는 차트 (dojox.gfx 캔버스)를 만들면 넣은 컨테이너에서 크기를 결정하는 것이 가장 좋습니다.하지만 혼란 스러울 수 있습니다!

피델의 경우 #chart는 블록 요소이며 panelContainer 너비의 100 % 인 panelBG에서 너비를 상속하므로 알려진 너비가 있습니다.

#chart div에는 실제로 높이가 없습니다. 블록 요소는 크기가 0px이므로 뭔가를 넣거나 스타일을 추가 할 때까지 높이가 없습니다. 결과적으로 (나는 생각합니다) 차트는 단순히 너비에 대한 비율의 높이를 가정합니다.

CSS에서 폭과 높이가 90 % 인 #chartDiv 규칙이 있음을 확인했습니다. 나는 당신이 #chart가되도록 의도 된 것 같습니다. 그것은 실제로 문제를 완전히 해결하지는 못했습니다!

변경했다고 가정하면 차트의 너비/높이가 90 % x90 %가되지만 시도하면 라벨/축이 여전히 잘못 배치 된 것을 볼 수 있습니다.

제목 컨테이너를 왼쪽으로 플로팅했기 때문에 차트 컨테이너는 같은 "라인"에서 시작하여 내용이 제목 컨테이너 주위에 "플로트"되도록합니다. 이렇게하면 실제 축 (svg/canvas, pink)이 제목 컨테이너 아래로 떨어지는 동안 축 레이블이 제자리에서 벗어나 (녹색) 왜곡됩니다. 이 문제를 해결하려면

, 양쪽 수레의 명확한 머물 차트 컨테이너 알려주기 :

#chart { 
    width: 90%; 
    height: 90%; 
    clear: both; 
} 

비록 아무것도 떠 정말 필요가 없습니다, 90에 높이를 설정 항상 이상적인 것은 아닙니다. 업데이트 된 바이올린에서 제안을했습니다 : http://fiddle.jshell.net/froden/WsrHs/4/.

차이점은 제목 컨테이너가 맨 위를 가로 지르는 div이고 차트 컨테이너가 절대적으로 배치되어 아래에 남겨진 공간을 채우는 것입니다. 그런 다음 panelContainer에 너비/높이를 설정할 수 있습니다.

Answer 2

정상적인 흐름에서 절대적으로 배치 된 요소가 추출됩니다. 이것이 요소 중 일부가 컨테이너를 넘어서 확장 된 이유입니다. 당신의 수레가 그와 관련되어 있다는 느낌이 들지만, 바이올린은 너무 복잡하고 간단한 버전을 만들어야합니다.