크기 조정이 가능한 캘린더 만들기 (html/css/jquery)

Question

나는 이것을 가능한 한 명확하게하려고 노력할 것입니다! 그래서 여기에 간다!

저는 Adam Shaw의 jquery 플러그인 인 fullCalendar을 사용해 왔습니다. 내가 맡은 프로젝트에 약간의 조정이있었습니다.

목적 :이 창에서 문서 공간을 채우고 창을 사이에 패딩의 10px를 떠나있는 동안 창 (크기를 조정할 때 항상 표시 유지하기위한 것입니다 수 있도록 fullcalendar의이 '버전은'설정 오른쪽에면에 그리고 하단에에 달력 자체. 또한 은캘린더 탐색 아래 문서 상단에 10 픽셀의 여백이 있어야합니다. 왼쪽은 정확합니다.

문제 : zip에 포함 된 'localendar.html'을로드하면 몇 가지 즉각적인 문제가 발생할 수 있습니다 (화면 해상도에 따라 다를 수 있음). 현재 캘린더는 캘린더 탐색에서 10px 아래로 고정되어 있지 않습니다. 또한 브라우저 창의 크기를 조정할 때 캘린더는 오른쪽과 아래쪽에 10px 패딩을 유지하지만 캘린더 상단은 세 가지 캘린더보기 옵션 모두에서 원하는대로 작동하지 않습니다. 달력에 스크롤 막대가 나타나도록 오버플로가 없어야합니다.

캘린더는 모든면에서 10px의 여백을 유지해야합니다 (왼쪽을 제외하고 캘린더의 탐색 아래에서 맨 위에 10px 만 제외). 캘린더가 평균 netbook 해상도보다 작아 질 수없는 최소 높이와 너비 (스크롤바를 일으키는 오버플로가 허용되는 지점).

-이 두 줄은 입니다.

localendar.html (70-92, 104-124)
fullcalendar.css (139 ~ 142 [보기 fullcalendar.css)
fullcalendar.js (473-492 [보기 fullcalendar.js)

Answer 1

요소의 모든 위치 속성을 '절대'로 설정합니다. 'position : absolute'로 설정하면 가장 가까운 상위 위치 인 'position : relative'로 설정됩니다. 또한 일반 문서 플로우에서 요소를 제거합니다. 위쪽 여백에서는 캘린더가 문서 흐름을 벗어나므로 위의 컨트롤과 겹치게됩니다. CSS에서 위치 속성을 제거해야합니다.

div#calendar { 
    margin-left: 252px !important; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

을이 규칙에 더 무게를 제공하기 때문에 나는 스타일 속성에 div 요소를 포함하고 있습니다 :

이것은 당신이 HTML 페이지 자체 달력 스타일이 있어야하는 것이다. 또한 'margin-left'속성의 값을 중요하게 설정하는 이유는 fullcalendar.css 파일에서 다른 스타일이 중요하기 때문입니다. 이 두 파일을 함께 사용하면 해당 파일에 적용된 왼쪽 여백이 무시됩니다.

지금까지는 사파리에서만 테스트 해 볼 수 있었지만 대부분의 브라우저에서 제대로 작동 할 것입니다. 이게 도움이되는지 알려주세요.