상위 요소의 높이를 기준으로 하위 요소의 위쪽 여백을 자동으로 조정하는 방법은 무엇입니까?

Question

오래된 대학 시험에 문제가 생겼습니다. 기본적으로 다음이 필요합니다:

이 JSON 파일 받기

으아아아

json 파일에 포함된 데이터를 사용하여 "main"(상위 요소)에 사각형 div를 그리는 함수를 만듭니다.

div의 크기는 뷰포트의 10% x 10%입니다. 위치와 배경색은 json 파일에 지정됩니다(위치는 메인 크기에 대한 백분율입니다)

모든 작업을 완료했지만 div에 스타일 사양을 적용하면 여백 상단이 상위 요소의 너비에 대한 백분율로 표시되어 온갖 종류의 오버플로 문제가 발생합니다.

으아아아

이것이 내 기능입니다. 이를 작동시키기 위해 내가 할 수 있는 일이 있다고 확신합니다. 질문을 명확하게 작성했으면 좋겠습니다

Answer 1

이것은 상위 요소에 정사각형 div를 그리는 데 사용되는 CSS를 보여주는 샘플 스니펫입니다. 이 데모에서는 CSS에서 위치를 설정했지만 JavaScript에서 설정해야 합니다.

으아아아 으아아아