각 판넬은 data-namespace 와 data-panelid 로 구분되는 2차원 배열 개념입니다.

중첩되는 판넬들은 data-position 을 공통으로 가집니다.

판넬 높이를 구할때 닫히거나 열린 각 판넬들의 높이를 먼저 구하고 

(중접된 판넬은 부모판넬높이 하나만 구합니다. 자식판넬들은 하위요소로 포함되어 있으니 부모높이에 포함됨)

각 판넬이 열리거나 닫힐때 handy-panelcontent 의 높이가 전달되는데

이것을 더하거나 빼면 실제 판넬높이가 됩니다.

이렇게 구해진 실제높이를 화면높이와 비교하면

top 과 bottom 사이의 view 높이를 구할수 있습니다.

화면이 감춰지고 (로딩 부하는 그대로) 정보의 전달력이 떨어지니 실제 홈페이지에는 적용 안하는게 좋습니다;

이걸 왜 했을까요?

구글에서 javascript footer bottom 로 검색하시면 정보를 좀더 얻을수 있습니다.

				<div class="handy-panel sidebar nestedparent collapsed" data-namespace="sidebarleft" data-position="msg" data-panelid="msg">
					<button type="button" class="button is-fullwidth" data-sidebarleft-button="msg">msg</button>
					<div class="handy-panelcontent is-1" data-sidebarleft-content="msg">
						<div class="handy-content">
							<div class="handy-panel nested">
								<div id="disp_ajax" name="disp_ajax" class="disp_ajax">disp_ajax </div>
								<div id="disp_lunar" name="disp_lunar" class="disp_lunar">disp_lunar </div>
								<div id="disp_msg" name="disp_msg" class="disp_msg">disp_msg </div>
							</div>
						</div>

						<div class="handy-panel sidebar nested nestedchild collapsed" data-namespace="sidebarleft" data-position="msg" data-panelid="cssjs">
							<button type="button" class="button is-fullwidth" data-sidebarleft-button="cssjs">cssjs</button>
							<div class="handy-panelcontent is-1" data-sidebarleft-content="cssjs">
								<textarea id="disp_cssjs" name="disp_cssjs" rows="20" style="width: 96.5%" spellcheck="false" placeholder="disp_cssjs">cssjs</textarea>
							</div>
						</div>

						<div class="handy-panel sidebar nested nestedchild collapsed" data-namespace="sidebarleft" data-position="msg" data-panelid="ztree">
							<button type="button" class="button is-fullwidth" data-sidebarleft-button="ztree">ztree</button>
							<div class="handy-panelcontent is-1" data-sidebarleft-content="ztree">
								<ul id="ztree_category" class="tree ztree_category"></ul>
								<button type="button" id="loadjsondata">load jsondata</button>

								<div class="handy-panel sidebar nested nestedchild expand" data-namespace="sidebarleft" data-position="msg" data-panelid="jsonformatview">
									<button type="button" class="button is-fullwidth" data-sidebarleft-button="jsonformatview">jsonformatview</button>
									<div class="handy-panelcontent is-1" data-sidebarleft-content="jsonformatview">
										<div id="disp_json_data" name="disp_json_data" class="disp_json_data">disp json data</div>
										<div id="disp_format_cookies" name="disp_format_cookies" class="disp_format_cookies">disp format cookies</div>
									</div>
								</div>

							</div>
						</div>

					</div>

			var ahandypanel_h = [];
			var panelsList = document.getElementsByClassName("handy-panel");
			for (var i=0; i<panelsList.length; i++)
			{
				var panel = panelsList[i];
				var panel_h = panel.offsetHeight;
				var data_namespace = panel.getAttribute("data-namespace");
				var data_position = panel.getAttribute("data-position");
				var data_panelid = panel.getAttribute("data-panelid");
				if ((data_namespace == null) || (data_namespace == "")) {
					continue;
				}	
				if (!assincludes(ahandypanel_h, data_namespace)) {
					ahandypanel_h[data_namespace] = [];
				}	
				if (panel.classList.contains("nestedparent")) {
					ahandypanel_h[data_namespace][data_position] = panel_h;
				}	
				else if (panel.classList.contains("nestedchild")) {
				}	
				else {
					ahandypanel_h[data_namespace][data_panelid] = panel_h;
				}	
			}